jQuery hover ne fonctionne que sur le côté gauche de div

Question

J'essaie de coder une barre de navigation supérieure qui n'apparaît que lorsque vous passez la souris sur le haut de la page en utilisant jQuery hover(). Je l'ai réussi à travailler avec succès, mais cela ne fonctionne que lorsque je me trouve sur le côté gauche de la barre de navigation, rien ne se passe sur le côté droit de la page. Lorsque j'inspecte l'élément, la barre du haut couvre toute la page horizontalement. Des idées pour lesquelles cela pourrait se produire? Code ci-dessous:

<div class="desktop-display"> 
    <div id="navigation-wrapper" class="navigation-wrapper"> 
     <header class="main-header" role="banner"> 
      <div class="row"> 
       <div class="col-md-4"> 
        <a href="#">LINK</a> 
        <a href="#">LINK</a> 
       </div> 
       <div class="col-md-4"> 
        <img src="logo.jpg"> 
       </div> 
       <div class="col-md-4"> 
        <a href="#">LINK</a> 
        <a href="#">LINK</a> 
       </div> 
      </div> 
     </header> 
    </div> 
</div> 

jQuery:

jQuery(document).ready(function(){ 
    jQuery("#navigation-wrapper").hover(
     function() { 
      $(this).addClass("nav-hover"); 
     }, function() { 
      $(this).removeClass("nav-hover"); 
     } 
    ); 
}); 

CSS:

.nav-hover { 
    background-color:white; 
    margin-bottom:79px; 
} 

.nav-hover .navigation a { 
    color:black; 
} 

Answer 1

juste essayer ce Demo

Je viens de faire quelques changements,

css

.nav-hover .navigation a { 
    color:black; 
} 

1. Vous n'avez pas une classe ".navigation" dans votre code HTML. donc les liens ne devenaient pas de couleur noire.
2. alors ajoutez simplement la classe ".navigation" avec la ligne.

reste vous juste vérifiez le code si cela fonctionne pour vous. alors utilisez-le.

<div class="row navigation"> 
    <div class="col-md-4"> 
     <a href="#">LINK</a> 
     <a href="#">LINK</a> 
    </div> 
    <div class="col-md-4"> 
     <img src="logo.jpg"> 
    </div> 
    <div class="col-md-4"> 
     <a href="#">LINK</a> 
     <a href="#">LINK</a> 
    </div> 
</div>