<分区>
如何用半背景颜色显示div内容而不显示文本值
示例:
<div style="height:25px; background-color: red;">
Content
</div>
我想在 onmouseover 事件时将 div 背景显示为半透明，并像往常一样显示文本。
我该怎么做。
标签 javascript jquery html css
<分区>
如何用半背景颜色显示div内容而不显示文本值
示例:
<div style="height:25px; background-color: red;">
Content
</div>
我想在 onmouseover 事件时将 div 背景显示为半透明，并像往常一样显示文本。
我该怎么做。
最佳答案
这样的东西行得通吗？
<div class="wrapper" style="position:relative;">
<div class="transparentBG" style="position:absolute;top:0;left:0;">Text</div>
<div class="overlay" style="position:absolute;top:0;left:0;">Text</div>
</div>
您可以通过为每个类设置“:hover”版本来设置样式如何变化。
尽管如此，您会从多浏览器支持中获得乐趣。
或者你可以使用两张图片:
<style>
.transparentBGOnHover { background-image: url(../images/red.png); }
.transparentBGOnHover:hover { background-image: url(../images/transparentRed.png); }
</style>
<div class="transparentBGOnHover">
Text
</div>
没有 DX 过滤器，IE6 无法正确处理透明 PNG。
您可能还需要通过 javascript 为 IE6 和 IE7 处理悬停，因为它们不支持 :hover 正确(尽管 IE5.5 发明了它)
关于javascript - 半透明背景颜色但不是文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1642458/