您的位置：首页 > Web前端 > CSS

CSS实现鼠标滑过时显示图片说明

2011-07-22 17:00 736 查看
浏览器兼容：
Opera、IE6+、Safari/Chrome、Firefox


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[s:37]XImageTransform.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[s:37]XImageTransform.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格式就可以随时使用这种效果了，很简单吧。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航