CSS实现鼠标滑过时显示图片说明
@其实用CSS实现鼠标经过时在图片上显示图片说明的方法其他人应该也介绍过，我昨天就看到了一个类似的效果演示，不过竟然不兼容opera。虽然opera用户相对其他浏览器来说很少。但是让CSS兼容opera比兼容其他浏览器（比如IE）要简单得多，举手之劳何乐不为呢？
所以我就出来再唠叨一遍吧：点击这里在新窗口查看演示。
HTML部分
<div class="imgbox">
<a href="#">
<img src="0197.jpg" alt="鼠标悬停时的图片标题演示 - dimlau.com" />
<span class="title">鼠标移过来</span>
<span class="hovercaptions">
<strong>浏览器兼容：</strong>
Opera、IE6+、Safari/Chrome、Firefox
</span>
</a>
</div>
CSS部分
首先，这是原始状态时的CSS样式：
.imgbox {
margin: 0;
overflow: hidden;
float: left;
}
.imgbox a {
text-decoration: none;
float: left;
position: relative;
}
.imgbox a:hover {
cursor: pointer;
}
.imgbox a img {
float: left;
margin: 0;
border: none;
padding: 10px;
background: #666;
border: 1px solid #333;
}
.imgbox a .title {
position: absolute;
right: 20px;
bottom: 20px;
font-size: 1.2em;
color: #333;
background: #fff;
padding: 5px 10px;
filter:alpha(opacity=65);
opacity:.65;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
}
.imgbox a .hovercaptions {
display: none;
}
主要是用position: absolute结合position: relative，把title内容定位在图片的右下角。title内容可以用来显示一些提示，比如我在这里写了“鼠标移过来”。
鼠标滑过时要显示的内容在初始状态时是被隐藏的。这里用到了：.imgbox a .hovercaptions {display: none;}
还有一些部分，比如文字背景的透明度，只是为了显示的更加美观，并不是必须的，可以根据自己的需要对CSS进行删减。
然后，是定义鼠标滑过时的样式：
.imgbox a:hover .title {
visibility: hidden;
}
.imgbox a:hover .hovercaptions{
display: block;
font-size: 1.2em;
padding: 10px;
background: #fff;
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
color: #333;
position: absolute;
bottom: 11px;
left: 11px;
margin: 0;
width: 480px;
border-top: 1px solid #999;
}
.imgbox a:hover .hovercaptions strong {
display: block;
margin-bottom: 5px;
font-size:1.5em;
}
滑过时，隐藏掉原始的title提示文字，同时把更详细的图片说明内容定位在图片的下部，同时进行一些美化处理。
需要注意的是，在.imgbox a:hover .title这里使用了visibility: hidden而不是display: none，因为在IE6里如果使用后者将无法隐藏这个title内容。IE总是很另类，-_-#。
OK，这就是全部了。把CSS文件写好后，在页面的任意位置套用上述HTML格式就可以随时使用这种效果了，很简单吧。
fin.
页面会变得很长么？期待。
wayne 2008-12-30,18:00 says: “回复”
收藏了, 说不定以后用得着 :D
dimlau 2008-12-30,20:01 says: “回复”
像你这样的大牛，用JS来实现不是更华丽么
wayne 2008-12-30,20:05 says: “回复”
我只是尘世中一迷途小菜鸟...
css不是挺好么, 老实讲比较讨厌在页面里嵌一堆js进去
Shawn 2008-12-31,00:29 says: “回复”
好玩，css 能实现就不要 js 了。
dimlau 2008-12-31,14:23 says: “回复”
CSS现实的效果毕竟不如JS那么平滑、华丽
火星人 2008-12-31,20:53 says: “回复”
Happy new year !
dimlau 2009-01-01,12:43 says: “回复”
谢谢
大家同happy，呵呵
wayne 2009-01-02,22:23 says: “回复”
新年咋不更新了勒, happy new year :D