html - CSS3 : Use On-hover Event to Set Semi-transparent Overlay on an Image

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>