저자:eoe 1.찾 으 려 면 먼저 좋 은 효 과 를 찾 아야 합 니 다~베 낄 수 있 습 니 다.DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.cssplay.co.uk/ http://www.cssbeauty.com a ul#hovershow{ list-style-type: none; margin: 50px; float: left; display: inline; clear: both; } ul#hovershow li{ float: left; display: inline; width:64px; height: 64px; margin: 2px; } ul#hovershow li a { display: block;width:64px; height: 64px; } ul#hovershow li a img{ border:1px #666 solid; width:100%; height:100%; } ul#hovershow li a:hover{ position: absolute; z-index:100; margin: -32px 0 0 -32px; } ul#hovershow li a:hover img{ width:128px; height:128px; border:1px red solid; } http://www.cssplay.co.uk/ width="128" height="128" alt="test" /> http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> width="128" height="128" alt="test" /> http://www.w3.org/1999/xhtml"> width="128" height="128" alt="test" /> http://www.rotui.net/lab/a/zoom/images/1.jpg" width="128" height="128" alt="test" /> http://www.rotui.net/lab/a/zoom/images/2.jpg" width="128" height="128" alt="test" /> http://www.rotui.net/lab/a/zoom/images/3.jpg" width="128" height="128" alt="test" /> http://www.rotui.net/lab/a/zoom/images/4.jpg" width="128" height="128" alt="test" /> 알림:일부 코드 를 수정 하고 실행 할 수 있 습 니 다. position: absolute; margin 세 개~하지만 해 보 니~IE5 의 A 가 효력 을 잃 었 습 니 다.3.단점 을 보완 하 는 것 은 남 의 CSS 를 볼 때 입 니 다~'역시 IE5 의 A 가 효력 을 잃 었 지만\#enlarge {padding:0; margin:2em auto; list-style-type:none; width:240px; height:40px;}#enlarge li {display:block; float:left; width:40px; height:40px; position:relative;}#enlarge li a {display:block; width:40px; height:40px; background:transparent; overflow:hidden; position:relative;}#enlarge li a img {width:100%; height:100%; border:0;}#enlarge li a:hover {position:absolute; left:-20px; top:-20px; width:80px; height:80px; z-index:100;} 알림:일부 코드 를 수정 하고 FT 를 실행 할 수 있 습 니 다. ~다른 사람 보다 정 의 를 더 많이 썼 습 니 다~그의 방법 은 position:relative 입 니 다. 배합 left top 다 똑 같 아 요.마이너스 로 하 는 거 예요.DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.rotui.net/lab/a/zoom/images/5.jpg" http://www.rotui.net/lab/a/zoom/images/6.jpg" a ul#hovershow2{ list-style-type: none; margin: 50px; width:200px; float: left; display: inline; clear: both; } ul#hovershow2 li{ float: left; display: inline; width:20px; height: 20px; margin: 2px; } ul#hovershow2 li a { text-decoration: none; display: block; width:20px; height:20px; border:1px red solid; background-color: White; line-height: 20px; font-size: 12px; text-align: center; } ul#hovershow2 li a:hover{ position: absolute; width:40px; height: 40px; line-height: 40px; font-size: 32px; z-index:100; margin: -10px 0 0 -10px; } 1 2 3 4 5 6 7 알림:일부 코드 를 수정 하고 실행 하면 더 재 미 있 습 니 다~IE 를 포기 합 니 다~http://www.rotui.net/lab/a/zoom/images/7.jpg" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> a ul#hovershow2{ list-style-type: none; margin: 50px; width:200px; float: left; display: inline; clear: both; } ul#hovershow2 li{ float: left; display: inline; width:20px; height: 20px; margin: 2px; } ul#hovershow2 li a { text-decoration: none; display: block; width:20px; height:20px; border:1px red solid; background-color: White; line-height: 20px; font-size: 12px; text-align: center; } ul#hovershow2 li a:hover{ position: absolute; width:40px; height: 40px; line-height: 40px; font-size: 32px; z-index:100; margin: -10px 0 0 -10px; }ul#hovershow2 li:hover + li a{ position: absolute; width:30px; height: 30px; line-height: 30px; font-size: 24px; z-index:99; margin: -5px 0 0 -5px; } 1 2 3 4 5 6 7 알림:일부 코드 를 수정 하고 실행 하 는 것 이 이상 적 이지 않 습 니 다.뒤쪽 의 A 폭 을 왼쪽 에 딱 가 려 진 것 으로 바 꿔 보 았 습 니 다.그런데 숫자 가 보이 지 않 습 니 다.예 쁘 지 않 아 도 원래 의 방법 으로 사용 해 보 았 습 니 다.after 에 그림 을 넣 었 습 니 다.왼쪽 에 있 습 니 다.그런데 숫자 가 있 으 면 없 으 면 더 안 예 쁩 니 다.N 장의 숫자 가 있 는 그림 을 만 들 수도 없고 확장 성 이 좋 지 않 습 니 다. 이것 이 css 자체 의 한계 일 수도 있 습 니 다.어쩌면 JS 로 더 쉽게 해결 할 수 있 습 니 다.
