メニューホバーのページの残りの部分 - '点滅'問題

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>

闇のdiv、ページの残りの部分に暗くなる要素（CSSが正常に動作します）を提供します。それは私が苦労しているjqueryだと誰かが助けることを望んでいる？

上記のように、上記のjqueryコードに含まれている要素をホバーする場合でも、私は現時点では点滅しています。

Answer 1

問題はjQueryだけでなく、CSSで問題になっています。

z-index:100〜.darknessに設定しますが、ホバリング要素にはz-indexを設定しないでください。 darknessが表示されたときに、それはnavigationがもはやdarknessは再び非表示になります（なぜならJQ機能の）そう推移している、navigationの上にあることnavigation

の上にありません。

darknessが隠されているとき、あなたはそれが再び表示されますnavigationに置くことができ、かつdarknessが上にして、再度非表示になりますので、もう一度、あなたはnavigationを置くことはできません。 - >このように '点滅'問題。

はちょうど（ホバーはあなたがliに置く場合でも動作しますので、それは残りの要素が含まれています）.navigationを使用darknessのzインデックスよりも.navigationや大きなへposition:relative;z-index:9999を設定し、JQインチ

は

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>

下のスニペットを参照してください