javascript - 突出显示 DIV 并在鼠标悬停时使其余部分变暗

Question

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

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

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

这可能吗？

score 9 · Accepted Answer

仅 CSS：

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

score 5 · Accepted Answer

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

我认为这应该有效。

score 3 · Accepted Answer

您可以做的是使用新的 div 作为“掩码”。

例如，您将拥有图像 divz-index:1;。

而且你还有另一个div。opacity:50%; position:fixed; top:0; left:0; width:100%; height:100%; z-index:2;页面加载时必须隐藏此黑色 div ( display:none;)。

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

附录：

如果你不想要一个覆盖div，而只想让其他图像不透明，则javascript只需要更改不透明度（你可以在类中管理这些不透明度，然后使用JS在它们之间切换）。

score 2 · Accepted Answer

最简单的方法可能是：

1）制作覆盖整个页面的半透明叠加层。

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

4 回答 4