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

dimlau

其实用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格式就可以随时使用这种效果了,很简单吧。

关于作者:定格咖啡馆主理人,著有《开家长长久久的咖啡馆》《咖啡入门书》等。

延伸阅读

本站架设在 RamNode VPS

使用 Grav CMS 发布管理