CSS3:使用悬停事件在图像上设置半透明叠加

Question

我需要一个悬停半透明div,导致一些文本显示在缩略图图像的顶部？是否可以在不使用JavaScript和仅使用层叠样式表的情况下执行此操作？

Answer 1

你可以尝试这样的事情:

<style type="text/css">
.thumb {position:relative;width:200px;height:20px;}
.thumb:hover .overlay {opacity:0.5;}
.overlay {position:absolute;top:0;left:0;width:200px;height:20px;background:#fff;opacity:0;}
</style>
<div class="thumb">
    <div class="overlay"></div>
    <img src="image.gif" />
</div>