Question

我有3行对齐的9个图像。每行有3个图像。图像在悬停时弹出。除了弹出其他图像的图像应该变暗。由于我有黄色背景，如果我试图减少图像的不透明度，图像显示为暗黄色。所以我不能减少不透明度。任何其他解决方案请帮忙我的样本代码
<div id="content"> <ul> <li> <div class="imagHolder"> <img src="my-image.jpg" width="320" height="240"> </div> </li> < /ul> </div>

CSS
#content { background : yellow; width : 940px; height : 500px; }

即使我将背景颜色设置为黑色到包装器imagHolder，图像在悬停时显示为暗黄色

Jquery代码
jQuery(document).ready(function() { jQuery('.imagHolder').hover (function() { jQuery('.imagHolder').css({'opacity' : '0.5'}); }, function(){ jQuery('.imagHolder').css({'opacity' : '1.0'}); } }

Answer 1

您可以在图像元素上设置background-color: #000 - 然后您应该能够降低不透明度以使图像变暗。

正如评论中所指出的，您需要在图像周围的包装上设置背景颜色。以下是演示该技术的工作示例：http://jsfiddle.net/UWJhM/

示例中代码的问题在于您正在更改包装器div的不透明度而不是图像的不透明度。在图像包装器上设置黑色背景，然后仅更改图像的不透明度，您应该没问题。

另一方面，此效果不需要JavaScript。您可以使用CSS规则替换您的jQuery代码，这些规则可以改变悬停时的不透明度，并且仍然可以获得相同的效果。再次，请参阅上面提到的jsfiddle，其中说明了这种技术。

Answer 2

反过来尝试了吗？在图像顶部创建一个div块：

<div class="imgHolder">
<img src "image01.jpg" width="100" height="100"/>
<div class="imgMask" ></div>
</div>

当然你必须正确应用正确的CSS：

.imgMask {
width:100px; height:100px; position: absolute; top: 0; left: 0; background-color: #000; display: none;
}
.imgHolder {
position: relative;
}

只需.show（）必要时imgMask：）

如何在悬停时屏蔽图像？

2 个答案: