深山老林

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://forest.blogbus.com/logs/2445418.html

今天发呆的时候才想到，把一种更直接简单的方法给忘记了，因为这里使用了绝对定位，所以可以使用z-index属性。

------------------------HTML------------------------------
<ul>
<li class="photo1"><q>text1</q><a href="#"></a></li>
<li class="photo2"><q>text2</q><a href="#"></a></li>
</ul>
----------------------------------------------------------

看起来没什么不同，就是把说明文字提了出来，这样<a></a>的状态变化对说明文字就没影响了，不明白？来看下去吧：

-----------------------CSS---------------------------------
ul{
list-style:none;
}
ul li{
width:80px;
height:80px;
position:relative;/*用于使用下面的绝对定位有效*/
}
ul li q{
width:80px;
height:20px;
position:absolute;/*使说明文字置于底部*/
bottom:0;
left:0;
text-align:center;
font-size:12px;
color:#fff;
line-height:20px;
background-color:#31CEFF;
z-index:2;
}
ul li a{
width:80px;
height:80px;
position:absolute;/*使链接跟说明文字重叠*/
left:0;
top:0;
display:block;
}
ul li a:link, ul li a:visited, ul li a:active{
z-index:3;
}
ul li a:hover{
z-index:1;/*显示说明文字*/
}
.photo1, .photo1 a{
background:url(http://www.blogbus.com/images/news/2005/12-22/commend.gif) no-repeat left top;
}
.photo2, .photo2 a{
background:url(http://www.blogbus.com/images/news/2005/12-22/commend.gif) no-repeat left top;
}
----------------------------------------------------------

不过很可惜，在IE中还是不能正常显示。