J'ai un problème avec un: hover psuedo sur un élément de menu. J'utilise Bootstrap et j'utilise ma propre feuille de style. J'ai fait des recherches un peu sur la communauté et j'ai découvert que je ne peux pas appliquer un: hover à un élément de bloc en ligne, mais c'est un élément de bloc. Je pense que peut-être que les classes bootstrap remplacent en quelque sorte le: hover, mais j'ai appelé mon custom.css après le boostrap.css dans la tête html, donc ...

Voici mon violon et le code est ci-dessous.

.nav-item {
  font-family: LubalinGraphStd-Medium;
  font-weight: normal;
  font-style: normal;
  font-size: 1.1em;
  margin-top: 30px;
  margin-left: 28px;
  color: #444b4b;
  height: 50px;
}

.navbar-default .navbar-nav li a:hover {
  color: #009ca6;
}

.nav-item-register {
  border-style: solid;
  border-width: thin;
  border-color: #009ca6;
  color: #009ca6;
}

.nav-item-register:hover {
  background-color: #009ca6;
}
<div id="navbar" class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-right">
    <li>
      <a class="nav-item" href="item.html">item</a>
    </li>
    <li>
      <a class="nav-item" href="item.html">item</a>
    </li>
    <li>
      <a class="nav-item" href="item.html">item</a>
    </li>
    <li>
      <a class="nav-item nav-item-register" href="#register">Register</a>
    </li>
  </ul>
</div>
<!--/.navbar-collapse -->

Tous les indices et / ou aide seraient grandement appréciés, merci!

1
Marc 21 avril 2017 à 18:10

3 réponses

Meilleure réponse

Vos sélecteurs CSS ne correspondent à aucun élément du code donné. Y a-t-il plus de code qui manque (à savoir, des éléments parents de <div id="navbar" class="navbar-collapse collapse">?

.navbar-default .navbar-nav li a:hover ne correspond à aucun élément car il n'y a aucun élément avec une classe de navbar-default.

Si vous ajoutez un <div class="navbar-default"> autour de ce bloc de code, cela fonctionne; violon ici: https://jsfiddle.net/wcso43a1/2/. Code complet:

<div class="navbar-default">
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
               <li>
                   <a class="nav-item" href="item.html">item</a>
               </li>
               <li>
                   <a class="nav-item" href="item.html">item</a>
               </li>
               <li>
                   <a class="nav-item" href="item.html">item</a>
               </li>
               <li>
                   <a class="nav-item nav-item-register" href="#register">Register</a>
               </li>
           </ul>
    </div><!--/.navbar-collapse -->
</div><!-- end of navbar-default -->

<!-- CSS -->

.nav-item {
  font-family: LubalinGraphStd-Medium;
  font-weight: normal;
  font-style: normal;
  font-size: 1.1em;
  margin-top: 30px;
  margin-left: 28px;
  color: #444b4b;
  height: 50px;
}

.navbar-default .navbar-nav li a:hover{
  color: #009ca6;
}

.nav-item-register {
  border-style: solid;
  border-width: thin;
  border-color:#009ca6;
  color: #009ca6;
}

.nav-item-register:hover {
  background-color: #009ca6;
}
0
Matt Styles 21 avril 2017 à 15:54

Utilisez simplement .nav-item:hover comme sélecteur pour le survol (au lieu de .navbar-default .navbar-nav li a:hover

.nav-item {
  font-family: LubalinGraphStd-Medium;
  font-weight: normal;
  font-style: normal;
  font-size: 1.1em;
  margin-top: 30px;
  margin-left: 28px;
  color: #444b4b;
  height: 50px;
}

.nav-item:hover {
  color: #009ca6;
}

.nav-item-register {
  border-style: solid;
  border-width: thin;
  border-color: #009ca6;
  color: #009ca6;
}

.nav-item-register:hover {
  background-color: #009ca6;
}
<div id="navbar" class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-right">
    <li>
      <a class="nav-item" href="item.html">item</a>
    </li>
    <li>
      <a class="nav-item" href="item.html">item</a>
    </li>
    <li>
      <a class="nav-item" href="item.html">item</a>
    </li>
    <li>
      <a class="nav-item nav-item-register" href="#register">Register</a>
    </li>
  </ul>
</div>
<!--/.navbar-collapse -->
0
Johannes 21 avril 2017 à 16:23

Vous pouvez le faire comme ceci:

.nav-item:hover {
  color: pink;
}

Mise à jour de Fiddle

0
lddz 21 avril 2017 à 15:16