28172 sujets

CSS et mise en forme, CSS3

[Résolu] Une couleur de fond différente sur un li du menu

Bonjour,
Je cherche à avoir par défaut une couleur de fond différente sur mon 1er <li class="test">blabla</li> de mon menu.
Pour cela c'est pas compliqué je fais dans mon CSS :
li.test {background-color: green;}
Mais je souhaite ensuite qu'au survol d'un li du menu ma couleur "green" disparaisse sur mon premier li et apparaisse sur le li choisi !
Je trouve pas comment faire ?
Si je fais :
li:hover {background-color: green; }
Comment retirer le background-color: green; au premier li ?
Merci d'avance Smiley cligne
Modifié par woubi (05 Sep 2018 - 14:13)
j'ai du mal faire ça sans jquery.... je me suis appuyer sur Raphael au niveau de l'ordre d'application CSS ici
Modifié par JENCAL (05 Sep 2018 - 14:43)
Administrateur
Hello,

Ce n'est pas très compliqué à réaliser mais il faut un peu de gymnastique CSS.

Voilà une solution :
ul {
  background: #aaa;
  list-style: none;
  padding: 0;
}
li {
	padding: 1rem;
	color: #fff;
}
ul:hover li {
  background: none;
}
li:first-child,
ul li:hover
{
	background: orange;
}


Le résultat en ligne : https://codepen.io/raphaelgoetter/pen/xaLOOW

Bonne journée Smiley smile
Meilleure solution
Du coup, Raphael, si on rajoute une classe sur les <li> en questions, et qu'on modifie ta ligne css :
ul:hover li {
  background: none;
}


par : 
ul:hover .li-classname{
  background: none;
}


plus rien ne fonctionne comme voulu... je comprend pas trop pourquoi.
Administrateur
JENCAL a écrit :
plus rien ne fonctionne comme voulu... je comprend pas trop pourquoi.

Car ton sélecteur "ul:hover .li-classname" a un poids de 2 classes + 1 élément et écrase les sélecteurs précédents (EDIT: et suivants, d'ailleurs).
Modifié par Raphael (05 Sep 2018 - 15:01)
upload/1536266505-72326-video2.png upload/1536266505-72326-video2.png upload/1536266505-72326-video2.png upload/1536266505-72326-video2.png upload/1536265732-72326-video.png
Merci Woubi ! de votre partage de lien sur les combinateurs d'adjacence, c est très intéressant pour moi aussi dans mon projet et j aurais mis certainement une semaine avt de faire la recherche. Smiley brothers
Sujet clos
Aller à