高亮显示DIV并将鼠标悬停时的其余部分调暗

仅限CSS:

jsBin demo

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

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

我认为这应该奏效。

您可以使用一个新的div作为“掩码”。

你会有你的 图像div 具有 z-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在它们之间切换)。

最简单的方法可能是:

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

2) 克隆您的DIV并将其放置在覆盖的顶部。