</li>
</ul>
</div>
测试地址
最后一个问题，hover效果，这可不是简单的:hover就可以实现，我们不能在li上给hover（这样当鼠标经过li就hover了），我们只能在数字上hover（<a href=”#a” class=”item”>1</a>）然后来影响它对于的图片，貌似不可能纯CSS实现，但确实可以实现，用“ + ”来实现。由于用到:target和“+”，所以只有Firefox、Opera支持。-__-
<style>
.macji{
position:relative;
}
.macji ul{
width:250px;
height:260px;
overflow:hidden;
}
ul li{
height:260px;
}
.macji a{
position:absolute;
left:0;
top:0;
z-index:2;
}
a.item{
z-index:10!important;
left:10px;
top:230px;
display:block;
width:20px;
height:20px;
border:solid 1px #777;
line-height:20px;
text-align:center;
color:#fff;
background:#aaa;
}
#b a.item{
left:31px;
}
#c a.item{
left:51px;
}
a.item:hover,:target a.item{
background:#f60;
}
#a:target a.pic,#b:target a.pic,#c:target a.pic{
z-index:3;
}
/* 原理是用绝对定位z-index来显示，另 “ + ” 只对节点的下一个兄弟节点有效 */
a.item:hover + a.pic{
z-index:9!important;
}
/* for ie */
a.pic{
* position:static;
}
</style>
<div class="macji">
<ul>
<li id="a">
<a href="#a" class="item">1</a>
<a href="#" class="pic"><img src="http://pics.taobaocdn.com/bao/album/chl/digital/3Cpj_250X260_080904_fox.jpg" />
</li>
<li id="b">
<a href="#b" class="item">2</a>
<a href="#" class="pic"><img src="http://pics.taobaocdn.com/bao/album/chl/smbzb_250x260_080818_ng.jpg" /></a>
</li>
<li id="c">
<a href="#c" class="item">3</a>
<a href="#" class="pic"><img src="http://pics.taobaocdn.com/bao/album/b2cdigital/guoqin_080919_250x260_xy.jpg" /></a>
</li>
</ul>
</div>
最终演示，代码实现是很简单，关键是是否联想到原理。举一反三，将会得到更多你想要的结果。不知不觉已是国庆节了，祝大家节日快乐！