Changer la couleur de la barre de navigation bootstrap sur le lien de survol?

Je veux savoir comment changer la couleur des liens lorsque vous les survolez dans la barre de navigation, car ils sont actuellement laids.

Merci pour toutes suggestions?

HTML:

 

Pour Bootstrap 3, voici comment je l’ai fait en fonction de la structure de la barre de navigation par défaut:

 .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color: #FFFF00; color: #FFC0CB; } 

Ceci est plus propre:

 ul.nav a:hover { color: #fff !important; } 

Il n’y a pas besoin d’être plus précis que cela. Malheureusement, le !important est nécessaire dans ce cas.

J’ai également ajouté :focus and :active à la même déclaration pour des raisons d’accessibilité et pour les utilisateurs de smartphones / tablettes / écrans tactiles.

Vous pouvez essayer ceci pour changer l’arrière-plan du lien en survol

 .nav > li > a:hover{ background-color:#FCC; } 

Vous devez remplacer la règle CSS:

 .navbar-inverse .brand, .navbar-inverse .nav > li > a 

ou

 .navbar .brand, .navbar .nav > li > a 

selon que vous utilisez le thème sombre ou clair, respectivement. Pour ce faire, ajoutez un CSS avec vos règles écrasées et assurez-vous qu’il entre dans votre code HTML après le CSS Bootstrap. Par exemple:

 .navbar .brand, .navbar .nav > li > a { color: #D64848; } .navbar .brand, .navbar .nav > li > a:hover { color: #F56E6E; } 

Il y a aussi l’alternative où vous personnalisez votre propre Boostrap ici . Dans ce cas, dans la section @navbarLinkColor , vous avez le @navbarLinkColor .

Ciblez l’élément que vous souhaitez modifier et utilisez !important d’écraser tous les styles existants affectés à cet élément. Veillez à ne pas utiliser la déclaration !important lorsque cela n’est pas absolument nécessaire.

 div.navbar div.navbar-inner ul.nav a:hover { color: #fff !important; } 

Utilisez le lien Come thing this, Ceci est basé sur Bootstrap 3.0

 .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background-color: #977EBD; color: #FFFFFF; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color: #977EBD; color: #FFFFFF; } 
 .nav > li > a:focus, .nav > li > a:hover { text-decoration: underline; background-color: pink; } 

Mis à jour 2018

Vous pouvez modifier les couleurs du lien Navbar avec CSS pour remplacer les couleurs Bootstrap …

Bootstrap 4

 .navbar-nav .nav-item .nav-link { color: red; } .navbar-nav .nav-item.active .nav-link, .navbar-nav .nav-item:hover .nav-link { color: pink; } 

Démo 4 couleur de lien de la barre de navigation

Bootstrap 3

 .navbar .navbar-nav > li > a, .navbar .navbar-nav > .active > a{ color: orange; } .navbar .navbar-nav > li > a:hover, .navbar .navbar-nav > li > a:focus, .navbar .navbar-nav > .active > a:hover, .navbar .navbar-nav > .active > a:focus { color: red; } 

Démo de la couleur du lien de la barre de navigation


Le changement ou personnaliser la couleur Navbar entière , voir: https://stackoverflow.com/a/18530995/171456

Désolé pour la réponse tardive. Vous ne pouvez utiliser que:

  nav a:hover{ background-color:color name !important; } 

Quelque chose comme ça a fonctionné pour moi (avec Bootstrap 3):

 .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{ font-family: proxima-nova; font-style: normal; font-weight: 100; letter-spacing: 3px; text-transform: uppercase; color: black; } 

Dans mon cas, je voulais aussi que le texte du lien rest noir avant le vol stationnaire, donc j’ai ajouté .navbar-nav> li> a

 .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-nav > li > a{ font-family: proxima-nova; font-style: normal; font-weight: 100; letter-spacing: 3px; text-transform: uppercase; color: black; } 

Si vous utilisez le code Navbar comme suit:

  

Ensuite, utilisez simplement le style CSS suivant pour modifier la couleur de survol de votre marque-navbar.

 .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: white; } 

Donc, votre couleur de vol plané sera changée en blanc. Je viens de le tester et ça marche pour moi correctement.