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

Question

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

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

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

这可能吗？

Answer 1

仅限CSS：

<强> jsBin demo

#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'})}
);

我认为这应该有用。

Answer 3

你可以做的是使用一个新的div作为'面具'。

您拥有图片div ，例如z-index:1;。

你还有{strong>另一个div 和opacity:50%; position:fixed; top:0; left:0; width:100%; height:100%; z-index:2;。当页面加载（display:none;）时，必须隐藏此黑色div。

使用javascript，当鼠标悬停在图像div上时，白色div应更改为z-index:3;，黑色div应更改为display:block;或类似。

ADDENDUM：

如果您不想要叠加div，但只想让其他图像不透明，那么javascript只需要改变不透明度（您可以在类中管理这些不透明度，然后只使用JS在它们之间切换）

Answer 4

最简单的方法可能是：

1）制作一个覆盖整页的半透明覆盖层。

2）克隆你的DIV并将其放置在叠加层的顶部。