其实用CSS实现鼠标经过时在图片上显示图片说明的方法其他人应该也介绍过，我昨天就看到了一个类似的效果演示，不过竟然不兼容opera。虽然opera用户相对其他浏览器来说很少。但是让CSS兼容opera比兼容其他浏览器（比如IE）要简单得多，举手之劳何乐不为呢？
所以我就出来再唠叨一遍吧：
<div class="imgbox">
<a href="#">
<img src="0197.jpg" alt="鼠标悬停时的图片KAIX.IN标题演示" />
<span class="title">鼠标移过来</span>
<span class="hovercaptions">
<strong>浏览器兼容：</strong>
Opera、IE6+、Safari/Chrome、Firefox
</span>
</a>
</div>
首先，这是原始状态时的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格式就可以随时使用这种效果了，很简单吧。