此效果利用链接的hover属性来模拟切换图片的效果,当初看到的时候以为是JS效果.其实通过Css一样可以很方便的实现.只要细心调整好图片的位置即可.
看图:
浏览效果:
http://www.5key.net/css/NO1
CSS代码如下:
#menu{
width:160px; height:128px;
}
#menu a.m1:visited, #menu a.m2:visited, #menu a.m3:visited, #menu a.m4:visited {
position:absolute;
display:block;
width:32px;
height:32px;
background-color:#499300;
color:#fff;
margin:130px 0px 0px 10px;
float:left;
text-decoration:none;
}
#menu a.m1:visited {top:0px; left:0px;}
#menu a.m2:visited {top:32px; left:0px;}
#menu a.m3:visited {top:64px; left:0px;}
#menu a.m4:visited {top:96px; left:0px;}
#menu a.m1:visited, #menu a.m2:visited, #menu a.m3:visited, #menu a.m4:visited {
position:absolute;
display:block;
width:32px;
height:32px;
background-color:#5c6773;
color:#fff;
margin:130px 0px 0px 10px;
float:left;
text-decoration:none;
}
#menu a.m1:visited {top:0px; left:0px;}
#menu a.m2:visited {top:32px; left:0px;}
#menu a.m3:visited {top:64px; left:0px;}
#menu a.m4:visited {top:96px; left:0px;}
#menu a.m1:hover, #menu a.m2:hover, #menu a.m3:hover, #menu a.m4:hover {
text-decoration:none;
background-color:#8c97a3;
color:#000;
margin:130px 0px 0px 10px;
float:left;
}
#menu a img {
display:block;
position:absolute;
width:1px;
height:1px;
border:0px;
top:0px;
left:0px;
}
#menu a.m1:hover img {display:block; position:absolute; top:0px; left:32px; width:128px; height:128px; border:0px;}
#menu a.m2:hover img {display:block; position:absolute; top:-32px; left:32px; width:128px; height:128px; border:0px;}
#menu a.m3:hover img {display:block; position:absolute; top:-64px; left:32px; width:128px; height:128px; border:0px;}
#menu a.m4:hover img {display:block; position:absolute; top:-96px; left:32px; width:128px; height:128px; border:0px;}
#oldimg {position:absolute; left:32px; top:0px; border:0px;
margin:130px 0px 0px 10px;}
HTML代码如下:
<div id="menu">
<img id="oldimg" src="images/png-0006.png" width="128px" height="128px" />
<a class="m1" href="#"> 1<img src="images/png-0001.png" alt="" border="0" title="picture1" /></a>
<a class="m2" href="#"> 2<img src="images/png-0005.png" title="picture2" alt="" /></a>
<a class="m3" href="#"> 3<img src="images/png-0003.png" title="picture3" alt="" /></a>
<a class="m4" href="#"> 4<img src="images/png-0004.png" title="picture4" alt="" /></a>
</div>
