当页面失去焦点时CSS发生变化

Question

我在页面主体前面显示了一个div，它工作良好，但是当页面失去焦点时（例如，我将鼠标悬停在滚动条上），就会显示背景元素。

例如，当我将页面悬停时：

当我悬停其他任何内容时：

我通过增加其z-index并将其不透明度设置为1来使这些面板出现。

当我们单击列表元素之一时，clip属性设置为此列表元素的大小，然后增加以获取页面的整个宽度和高度。然后，该面板将覆盖所有其他内容。

$(function(){
    
    //content panel
    //display the panel in fullscreen
    var $allPanels = $('#rb-grid > li');
    $allPanels.eq(0).on('click', function(){
        activePanelIndex =0;
        if(activePanel)
            return false;
        else
            displayPanel ($allPanels.eq(0), 0);
    });
    $allPanels.eq(1).on('click', function(){
        activePanelIndex =1;
        if(activePanel)
            return false;
        else
            displayPanel ($allPanels.eq(1), 1);
    });
    $allPanels.eq(2).on('click', function(){
        activePanelIndex =2;
        if(activePanel)
            return false;
        else
            displayPanel ($allPanels.eq(2), 2);
    });
    
    
});


function displayPanel($panel, index){
    //variables to set the square for the clip property
    var offset = $panel.offset(),
        scrollT = $(window).scrollTop(),
        scrollL = $(window).scrollLeft(),
        top = offset.top - scrollT,
        left= offset.left - scrollL,
        bottom = $panel.outerHeight() + top,
        right = $panel.outerWidth()+ left;

    activePanel = true;
    
    var transEndEventNames = 'webkitTransitionEnd transitionend oTransitionEnd MSTransitionEnd',
        rect = 'rect('+top+'px,' +right+'px,' +bottom+'px,' +left+'px)', //the rectangle of the size of the panel
        rect2 = 'rect(0px ' + $(window).width() + 'px ' + $(window).height() + 'px 0px)'; //all the screen
    
    var $overlay = $panel.children('.rb-overlay');
    
    
    $overlay.css('clip', rect).addClass('rb-overlay-active').attr('id', 'active-overlay');
    
    $overlay.on(transEndEventNames, function(){
            $overlay.off(transEndEventNames);
            $overlay.css( 'clip', rect2 );
            
            setTimeout(function(){
                $('body').css('overflow-y', 'hidden');
                $overlay.css( 'clip', 'auto' );
            }, 200);
        });
 
 //event on the close button
    
    $('span.rb-close').eq(index).on('click', function(){
       $('span.rb-close').eq(index).off('click');
       
        setTimeout(function(){
            $('.rb-overlay').eq(index).css('clip', rect);
            $('#active-overlay').removeClass('rb-overlay-active').removeAttr('id');
            $('body').css('overflow-y', 'auto');
            activePanel = false;
            activePanelIndex = -1;
       }, 25);
       
       
    });
}

.rb-grid{
    list-style: none;
    text-align: center;
    margin: 0 auto;
}

.rb-overlay{
  opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.4s ease;
    z-index: -1;
    pointer-events: none;
    cursor: default;
    background-color: black;
    }
    
.rb-overlay-active{
    opacity: 1;
    z-index: 9999;
    pointer-events: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="rb-grid">
  <li>
    <h3> Panel1</h3>
    <div class="rb-overlay">
      <span> close button</span>
      <p> Hidden Content </p>
    </div>
  </li>
  <li>
    <h3> Panel2</h3>
    <div class="rb-overlay">
      <span> close button</span>
      <p> Hidden Content </p>
    </div>
  </li>
  <li>
    <h3> Panel3</h3>
    <div class="rb-overlay">
      <span> close button</span>
      <p> Hidden Content </p>
    </div>
  </li>

也许问题是我没有删除表示不透明度为0且z-index -1的第一类？