18041 sujets

Questions générales et questions de débutants

Changer la couleur au survol d'un <li>

bonjour,

J'ai une liste <ul> qui comporte des <li>. Je désire changer la couleur du texte d'un <li> lorsque la souris survole ce <li>. J'ai essayé d'appliquer la propriété hover mais son problème est que le changement de couleur ne s'effectue que si la souris est sur le texte, or je veux que même si la souris est sur le vide entourant le texte du <li> la couleur change. voici des images illustrant les résultats de hover:

lorsque la souris est au-dessus du vide, le texte est en noir (par défaut)
upload/57489-1.PNG

lorsque la souris est au-dessus du texte, le texte change de couleur
upload/57489-2.PNG

Aidez-moi svp, merci !!
bonjour,


li:hover element{
  color:...;
}


remplacer "element" par l'élément que contient le "li".

si c'est un lien, ça sera donc li:hover a { color:...; }

Tu peux aussi, de façon générique, utiliser li:hover > * { color:...: } mais j'ai peur de t'embrouiller.
Modifié par kenor (06 Feb 2015 - 13:25)
kenor a écrit :

li:hover a{
  color:...;
}

salut,
cette façon de faire n'est pas tout à fait une bonne pratique s'il s'agira d'un lien. Généralement quand il y a un changement d'état d'un élément au survol, c'est pour signifier qu'une action peut être réalisée sur ce dernier (pour un lien ça sera tout bêtement cliquer...). Dans cet exemple, le lien changera d'état mais ne sera pas cliquable.
La meilleure façon serait donc de mettre le lien en "display:block" de telle sorte à ce qu'on ne souciera plus du vide qui peut y avoir.
A vrai dire je ne fais que répondre à la question Smiley smile
Dans l'absolu, je ne définis jamais la taille de l'élément par le <li> mais bien par le <a>, de sorte qu'il soit effectivement entièrement cliquable.
(c'est à dire, pas comme le fait alsacreations Smiley lol même si seul le lien est en hover)
Modifié par kenor (07 Feb 2015 - 11:52)
kenor a écrit :
(c'est à dire, pas comme le fait alsacreations Smiley lol même si seul le lien est en hover)

Smiley choque oooo bin dis donc ! C'est vrai tout ça...
@Olivier C> je n'ai pas trouvé la partie dont tu parles sur lien que tu as cité (la liste tout en haut ?). Il y a sûrement des exceptions qu'on pourrait trouver mais elles ne génèrent aucune confusion. Dans le cas évoqué, il y a un lien dans un <li> et on est entrain de changer l'état du <li>.
Ce sont là de simples notions d'ergonomie. Vois à quel point c'est perturbant d'avoir ce genre de situations alors qu'il serait beaucoup plus simple si c'était autrement
Zelalsan a écrit :
je n'ai pas trouvé la partie dont tu parles sur lien que tu as cité (la liste tout en haut ?)

Non, voir sur les forums la div .list-inner:hover.
Modifié par Olivier C (09 Feb 2015 - 14:53)
Sujet clos
Aller à