深山老林

2006-05-10[原]用CSS实现图片说明提示

在网上会看到那种当鼠标放到一张图片上就会在图上面出现一个说明文字之类的东东， 用JS来控制层的隐藏和显示，可以很容易的实现这个效果。

今天我们不是要说用JS怎么实现，而是来看看用CSS怎么实现这个效果。

首先按正常的思路：跟状态有关的就只有用链接的四个状态，当鼠标放到图上时，让说明文字显示出来，移开时隐藏，那说明的文字放在哪个位置？下面来看下HTML部分怎么写：

------------------------HTML------------------------------
<ul>
<li class="photo1"><a href="#"><q>text1</q></a></li>
<li class="photo2"><a href="#"><q>text2</q></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;
}
ul li a{
width:80px;
height:80px;
position:absolute;/*使链接跟说明文字重叠*/
left:0;
top:0;
display:block;
}
ul li a:link q, ul li a:visited q, ul li a:active q{
display:none;
}
ul li a:hover q{
display:block;/*显示说明文字*/
}
.photo1{
background:url(http://www.blogbus.com/images/news/2005/12-22/commend.gif) no-repeat left top;
}
.photo2{
background:url(http://www.blogbus.com/images/news/2005/12-22/commend.gif) no-repeat left top;
}
----------------------------------------------------------

ＯＫ，现在到IE看看效果，是不是没有效果？没错，在IE里是没有效果的，我想可能是因为文字一开始就隐藏了，所以也就没有位置可以触发它显示。可是在FF中是完全没问题的哦！IE不能显示，多少还是有点可惜，不如就换个思路吧，既然先隐藏了不行，那就让它不隐藏不就行了。先改改HTML部分：

------------------------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;
}
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{
display:block;
}
ul li a:hover{
display:none;/*显示说明文字*/
}
.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;
}
----------------------------------------------------------

这个思路就是“三明治”，将说明文字放在两个相同图片的中间，当鼠标经过时把上面的图隐藏，就会出现说明文字，这样看起来的效果就跟说明文字出现一样了，当然这只能算是一种障眼法，当图片是透明背景时问题就会出现。

最终效果