如何在悬停时屏蔽图像？

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,其中说明了这种技术.