Jquery – 突出显示div / greout out of page

我正在尝试突出显示页面其余部分的div / grey.我的代码是：

jQuery(document).ready(function ($) {
$('.entry-content').mouSEOver(function(e) {
$('.expose').mouSEOver(function(e){
    $(this).css('z-index','99999');
    $('#overlay').fadeIn(300);
});
});

$('.entry-content').mouseleave(function(e) {
$('.expose').mouseleave(function(e){
    $('#overlay').fadeOut(0,function(){
        $('.expose').css('z-index','1');
});});});});

HTML看起来像

<div id="overlay">
<div class="entry-content">
  <div class="expose">something</div>
  <div class="expose">something</div>
  <div class="expose">something</div>
</div>

#overlay {
background:rgba(0,0.3);
display:none;
width:100%; height:100%;
position:absolute; top:0; left:0; z-index:99998;
}

我所追求的是只要用户在入口内容div上盘旋,让页面变灰并突出显示他正在盘旋的div.

有任何想法吗？
谢谢

解决方法

z-index相对于堆叠上下文,而不是相对于文档.如果希望公开元素出现在叠加层上,它们必须是兄弟,或者必须使用position：*显式定位.expose.

通常,元素必须是相同堆叠上下文的一部分,以便比较它们的z-index值.您可以了解有关堆叠上下文here的更多信息.

一些额外的要点：

>您应该使叠加层对指针事件透明.你可以使用pointer-events：none;
>当容器被鼠标悬停时,您不需要绑定到.expose.将处理程序与处理程序并行绑定以显示/隐藏叠加层

这是更正后的代码.你可以看到工作演示here：

CSS：

#overlay {
    background:rgba(0,0.3);
    display:none;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:99998;
    pointer-events:none
}
.expose{
    background-color:red;
    position:relative;
}

JS：

$('.entry-content').hover(function() {
    $('#overlay').fadeIn(300);
},function() {
    $('#overlay').fadeOut(300);
});

$('.expose').hover(function(e) {
    $(this).css('z-index','99999');
},function(e) {
    $(this).css('z-index','1');
});