Menu texte noir fond blanc puis texte blanc fond noir en hover

Question

spip93

23 Feb 2021 à 14:26

Bonjour à tous et à toutes,

Je suis conscient que ma question est éminemment stupide pour les pros du CSS que vous êtes, mais je la pose quand même car il n'est pas rare que je sois confronté à ce problème.

Mon problème est le suivant :
J'ai un menu avec un texte noir sur fond blanc et je voudrais qu'au passage de la souris mon texte soit blanc sur fond noir.

Voici le code HTML de mon menu :

<div class="collapse navbar-collapse" id="navbar-collapse-menu">
    <ul class="nav navbar-nav col-xs-12">
        <li class="dp-menu dp-menu-home">
            <span class="fas fa fa-pencil fa-nav-link" title="Editer la rubrique/sous-rubrique" onclick="location.href = 'https://nom_du_site.fr/node/edit/nid/xxxxxx'"> </span>
            <a href=" /" title="Accueil">
                <span class="dp-menu-icon">Accueil</span>
            </a>
        </li>
        <li class="dp-menu ">
            <span class="fas fa fa-pencil fa-nav-link" title="Editer la rubrique/sous-rubrique" onclick="location.href = 'https://nom_du_site.fr/node/edit/nid/xxxxxx'"> </span>
            <a style="cursor: context-menu;" href=" #" title="Rubrique 1">
                <span class="dp-menu-icon">Rubrique 1</span>
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li class="item-menu dp-menu ">
                    <span class="fas fa fa-pencil fa-nav-link fa-nav-link-subnavigation" title="Editer la rubrique/sous-rubrique" onclick="location.href = 'https://nom_du_site.fr/node/edit/nid/xxxxxx'"> </span>
                    <a href="" title="Sous rubrique 1-1"> Sous rubrique 1-1 </a>
                </li>
                <li class="item-menu dp-menu ">
                    <span class="fas fa fa-pencil fa-nav-link fa-nav-link-subnavigation" title="Editer la rubrique/sous-rubrique" onclick="location.href = 'https://nom_du_site.fr/node/edit/nid/xxxxxx'"> </span>
                    <a href="" title="Sous rubrique 1-2"> Sous rubrique 1-2 </a>
                </li>
                <li class="item-menu dp-menu  disabled">
                    <span class="fas fa fa-pencil fa-nav-link fa-nav-link-subnavigation" title="Editer la rubrique/sous-rubrique" onclick="location.href = 'https://nom_du_site.fr/node/edit/nid/xxxxxx'"> </span>
                    <a href="" title="Sous rubrique 1-3"> Sous rubrique 1-3 </a>
                </li>
            </ul>
        </li>
        <li class="dp-menu ">
            <span class="fas fa fa-pencil fa-nav-link" title="Editer la rubrique/sous-rubrique" onclick="location.href = 'https://nom_du_site.fr/node/edit/nid/xxxxxx'"> </span>
            <a href="" title="Rubrique 2">
                <span class="dp-menu-icon">Rubrique 2</span>
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li class="item-menu dp-menu ">
                    <span class="fas fa fa-pencil fa-nav-link fa-nav-link-subnavigation" title="Editer la rubrique/sous-rubrique" onclick="location.href = 'https://nom_du_site.fr/node/edit/nid/xxxxxx'"> </span>
                    <a href="" title="Sous rubrique 2-1"> Sous rubrique 2-1 </a>
                </li>
                <li class="item-menu dp-menu ">
                    <span class="fas fa fa-pencil fa-nav-link fa-nav-link-subnavigation" title="Editer la rubrique/sous-rubrique" onclick="location.href = 'https://nom_du_site.fr/node/edit/nid/xxxxxx'"> </span>
                    <a href="" title="Sous rubrique 2-2"> Sous rubrique 2-2 </a>
                </li>
                <li class="item-menu dp-menu ">
                    <span class="fas fa fa-pencil fa-nav-link fa-nav-link-subnavigation" title="Editer la rubrique/sous-rubrique" onclick="location.href = 'https://nom_du_site.fr/node/edit/nid/xxxxxx'"> </span>
                    <a href="" title="Sous rubrique 2-3"> Sous rubrique 2-3 </a>
                </li>            
            </ul>
        </li>
        <li class="dp-menu ">
            <span class="fas fa fa-pencil fa-nav-link" title="Editer la rubrique/sous-rubrique" onclick="location.href = 'https://nom_du_site.fr/node/edit/nid/xxxxxx'"> </span>
            <a href="" title="Rubrique 3">
                <span class="dp-menu-icon">Rubrique 3</span>
            </a>
        </li>
        <li class="dp-menu ">
            <span class="fas fa fa-pencil fa-nav-link" title="Editer la rubrique/sous-rubrique" onclick="location.href = 'https://nom_du_site.fr/node/edit/nid/xxxxxx'"> </span>
            <a href="" title="Rubrique 4">
                <span class="dp-menu-icon">Rubrique 4</span>
            </a>
        </li>
        <li class="dp-menu ">
            <span class="fas fa fa-pencil fa-nav-link" title="Editer la rubrique/sous-rubrique" onclick="location.href = 'https://nom_du_site.fr/node/edit/nid/xxxxxx'"> </span>
            <a href="" title="Rubrique 5">
                <span class="dp-menu-icon">Rubrique 5</span>
            </a>
        </li>
        <li class="dp-menu ">
            <span class="fas fa fa-pencil fa-nav-link" title="Editer la rubrique/sous-rubrique" onclick="location.href = 'https://nom_du_site.fr/node/edit/nid/xxxxxx'"> </span>
            <a href="" target="_blank" title="Rubrique 6">
                <span class="dp-menu-icon">Rubrique 6</span>
            </a>
        </li>
    </ul>
</div>

Et voici mon code CSS qui pose problème :

/*Rubriques du menu principal*/
.nav.navbar-nav.col-xs-12 > li > a .dp-menu-icon {
  	font-family: "Maison Neue" !important;
	color: black !important;
  	font-size: 1.6em;
}
/*Pour que les flèches à droite des rubriques de menu soient noires*/
.nav.navbar-nav.col-xs-12 > li > a .caret {
	color: black;
}
/*Pour les entrées des sous-menus*/
.dp-default.dp-default-manager.dp-default-manager-index .container-fluid ul.dropdown-menu li a
{
	font-family:"Helvetica Neue Regular" !important;
	color: black !important;
}

/*Code CSS qui pose problème*/
.dp-menu .fas.fa.fa-pencil.fa-nav-link:hover::before,
.nav.navbar-nav .dp-menu:hover,
.nav.navbar-nav .dp-menu span.dp-menu-icon:hover {
	background-color: black !important;
	color: white !important;
}

Voici un codepen fait vite fait

Le problème que j'ai c'est que, avec le code ci-dessous, quand je passe la souris sur le bouton, le fond passe bien en noir, mais pas le texte (le texte reste en noir => noir sur noir). Pour que le texte passe en blanc sur fond noir, je dois passer la souris sur le texte.

Comment faire en sorte que mon texte soit blanc sur fond noir au passage de la souris quelle que soit la position du pointeur (sur le bouton ou sur le texte) ?

Je vous remercie pour votre réponse et votre aide.

Bonne journée

P.S : Je précise que j'ai mis des !important dans mon CSS parce que certaines règles rentrent en conflit avec celles d'une feuille de style chargée avec la page et sur laquelle je n'ai pas la main.
Modifié par spip93 (23 Feb 2021 - 16:30)

gcyrillus

Modérateur

23 Feb 2021 à 17:46

bonjour, Il est toujours préferable de ne pas utiliser !important et de réduire autant que possible les regles CSS qui deviennent redondantes (et parfois contre productive Smiley cligne

) .

Les couleurs pourraient être appliquées comme ceci :

.navbar-nav > li {
	float: left;
       color:black;/* couleur par défaut mais utile surtout le reset des liens */
}
.navbar-nav > li a {
  color:inherit;
}

/* ne plus déclarer de couleurs a partir d'ici, c'est déjà fait ! */

/* etc... */ 


/*Code CSS qui pose problème*/
/* peut être réduit à : */
.navbar-nav > li:hover {
	background-color: black ;
	color: white ;
}

Si d'autre règles entre en conflit et que , tu peut par exemple utiliser (ou ajouter une) l'id sur le conteneur parent des li :

<div class="collapse navbar-collapse" id="navbar-collapse-menu">
  <ul id="black&white" class="nav navbar-nav col-xs-12">

de façon a avoir un poids de sélecteur plus élevé et s'en servir au lieu de !important.

Bootstrap comprend aussi des classes de couleurs pour les textes et fonds, faire un reset a partir de(s) l' id(s) sur celles inutiles au besoin peut aussi être une solution permettant de faire une correction commune à un seul endroit de ta feuille de style. Smiley cligne

Cdt
Modifié par gcyrillus (23 Feb 2021 - 18:01)

Sujet clos

CSS et mise en forme, CSS3

Menu texte noir fond blanc puis texte blanc fond noir en hover