菜單懸停頁面上昏暗的其餘部分 - 「閃爍」問題

Question

我試圖在我的網站超級菜單上懸停時調暗頁面的其餘部分。儘管效果在某種程度上起作用，但它似乎閃爍起來，或閃爍，然後不再回來（即使我將鼠標懸停在正確的元素上）。

jQuery('.navigation,#mainMenu,.mega-menu-content,.mega-menu-item').hover(function() { 
 
    jQuery('.darkness').fadeTo(0, 1); 
 
}, function() { 
 
    jQuery('.darkness').fadeTo(300, 0, function() { 
 
    jQuery(this).hide(); 
 
    }); 
 
});

.darkness { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    display: none; 
 
    height: 100%; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    z-index: 100; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="navigation" role="navigation"> 
 
    <ul id="mainMenu"> 
 
    <li> 
 
     <a href="mywebsite">Standard Item</a> 
 
    </li> 
 
    <li class="mega-menu-item"> 
 
     <a href="mywebsite">Dropdown Item</a> 
 
     <li> 
 
     <div class="mega-menu-content"> 
 
      <div class="row"> 
 
      <div class="col-md-2"> 
 
       <ul class="sub-menu"> 
 
       <li class="level1"> 
 
        <a href="mywebsite">Sub-Category</a> 
 
       </li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </li> 
 

 
    </ul> 
 
</nav> 
 
<div class="darkness"></div>

黑暗格，給人的頁面的其餘部分變暗元素（CSS工作正常）。這是我掙扎着的jquery，我希望有人能幫忙嗎？

正如我上面所說，這是我目前正在獲得的閃爍效果，即使在上面的jquery代碼中包含的元素上懸停時。

Answer 1

問題不僅在於jQuery，而且在於CSS。

您將z-index:100設置爲.darkness，但不要將z-index設置爲懸停元素。所以出現darkness時，它是上的navigation

正對navigation的頂部之上，navigation不再徘徊所以（因爲JQ功能的）darkness再次隱藏。

時darkness是隱藏的，你可以在navigation懸停所以它再次出現，然後你又不能懸停navigation因爲darkness是在上面，再次隱藏。等等 - >因此是'閃爍'的問題。

設置position:relative;z-index:9999到.navigation或大於的darkness的z-index和JQ只是使用.navigation（它包含的元素的其餘部分，所以如果你懸停在li懸停甚至會工作）。

看到下面的代碼片段

jQuery('.navigation').hover(function() { 
 
    jQuery('.darkness').fadeTo(0, 1); 
 
}, function() { 
 
    jQuery('.darkness').fadeTo(300, 0, function() { 
 
    jQuery(this).hide(); 
 
    }); 
 
});

.darkness { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    display: none; 
 
    height: 100%; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    z-index: 100; 
 
} 
 
/*added css*/ 
 
.navigation { 
 
\t position:relative; 
 
    z-index:101; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="navigation" role="navigation"> 
 
    <ul id="mainMenu"> 
 
    <li> 
 
     <a href="mywebsite">Standard Item</a> 
 
    </li> 
 
    <li class="mega-menu-item"> 
 
     <a href="mywebsite">Dropdown Item</a> 
 
     <li> 
 
     <div class="mega-menu-content"> 
 
      <div class="row"> 
 
      <div class="col-md-2"> 
 
       <ul class="sub-menu"> 
 
       <li class="level1"> 
 
        <a href="mywebsite">Sub-Category</a> 
 
       </li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </li> 
 

 
    </ul> 
 
</nav> 
 
<div class="darkness"></div>