突出显示DIV并在鼠标悬停时调暗其余部分

Question

我有一个装满DIV的页面,其中包含图像.

当我将鼠标悬停在图像上时,我可以通过添加类等来突出显示它或添加阴影以轻松地突出显示它,但是有没有办法将所有其他图像调暗.

DIV被加载到DOM中我希望DIV当前徘徊以保留100%或1个不透明度,并且当突出显示一个DIV时,页面上的其余DIV会淡化为70%或0.7.

这可能吗？

Answer 1

仅限CSS:

jsBin演示

#parent:hover > div{ opacity:0.6; }    /* Fade ALL OUT on parent hover */   
#parent > div:hover{ opacity:1; }      /* Fade in hovered one */

Answer 2

$('div').hover(function() {
    $('div').css({opacity: '0.7'});
    $(this).css({opacity: '1'});
}, function() {
    $('div').css({opacity: '1'})}
);

我认为这应该有效。