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>

Answer 2

好的我知道这已经过时但是我遇到了一些关于不透明度设置的内容

http://deepubalan.com/blog/2010/03/29/rgba-vs-opacity-the-difference-explained/

看一看，我发现使用rgba时，如果可能的话，不透明度会产生更好的结果，不透明度可以在不同的浏览器中起作用，并导致各种各样的错误问题...... 只是我的2美分

Answer 3

根据您对缩略图所做的操作，您可以将DIV的背景设置为图像，包含文本，并使用CSS在悬停时将可见性从透明切换为实体。

如果你有一个已知大小的缩略图（因为很难将div自动调整为其背景图像的大小），这只会干净利落地工作，但它会在你的html中提供一个简单的解决方案：

<div class="thumb" style="background-image: url(thumb.jpg);">
     <p>mouseover text</p>
</div>

重要的CSS会是这样的......

div.thumb p { visibility: hidden; }
div.thumb:hover p { visibility: visible; }

不确定您的问题是整个div是透明的还是文本，但您可以在任何级别应用相关的CSS。

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

3 个答案: