Dim Reste de la page sur le menu hover - 'clignotant' numéro

Question

J'essaye d'obscurcir le reste de la page sur le vol stationnaire de mon menu mega de sites Web. Bien que l'effet fonctionne dans une certaine mesure, il semble clignoter et s'éteindre, puis s'éteindre et ne pas se rallumer (même si je repasse sur l'élément correct).

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>

La div obscurité, donne le reste de la page, l'élément de assombrissement (CSS fonctionne très bien). C'est la question avec laquelle je me bats et j'espère que quelqu'un pourra m'aider? Comme je l'ai dit plus haut, c'est un effet clignotant que j'obtiens en ce moment, même en survolant des éléments qui sont inclus dans le code jquery ci-dessus.

Answer 1

le problème n'est pas seulement avec le jQuery mais avec le CSS.

Vous avez défini z-index:100 sur .darkness mais ne définissez pas z-index sur l'élément planant. donc quand l'darkness apparaît, il est au-dessus de la navigation

étant au-dessus de la navigation, le navigation n'est plus plané si (en raison de la fonction JQ) darkness cache à nouveau.

quand darkness est caché, vous pouvez passer sur navigation il apparaît à nouveau, puis à nouveau vous ne pouvez pas le planent navigation parce que darkness est sur le dessus et se cache à nouveau. et ainsi de suite -> ainsi le problème «clignotant».

mis position:relative;z-index:9999-.navigation ou plus grand que z-index de darkness et JQ il suffit d'utiliser .navigation (il contient le reste des éléments de sorte que le vol stationnaire fonctionnera même si vous passez la souris sur li).

voir ci-dessous extrait de code

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>