:hover sur un <a> avec prise en compte de la largeur du <li>

Par Lavoignat, il y a 9 ans

Les bases HTML/CSS

Bonjour,

Voici la situation :
J'ai un sous-menu vertical formé par des LI, contenant des A.

En CSS, je cherche à savoir comment effectuer un :hover sur un LI pour que le fond (largeur total du A) et le texte (contenu dans le A) changent de couleur en même temps.

Je sais que l'on peut faire des :hover sur des LI et des A, mais quand on passe le curseur, on a le fond qui change de couleur, puis seulement après le texte car le curseur finit par arriver dessus. J'aimerais que ça soit les deux en même temps.

D'une autre manière, en mettant le background sur le A, j'arrive à avoir le fond et le texte qui se changent en même temps, mais cette fois c'est la largeur qui ne me convient pas. Elle ne correspond pas à la largeur du LI. J'imagine que le A peut hériter de la largeur du LI, mais je n'y arrive pas.

Je remercie par avance la ou les personnes qui voudrait(en)t bien m'aider.
Bien à vous,

3 réponses

F3LENYR, il y a 9 ans

Salut,
Je suis désolé mais je dois t'avouer que j'ai du mal à te suivre, peut-tu nous donner un screenshot ou un ptit bout de code ? ;)
Si tu veux tout simplement changer le "li" et le "a" en même temps :

li a:hover { background-color: #111; color: red; }

Mais je suis pratiquement sûr que ce n'est pas ça que tu cherche ;p

SLK, il y a 9 ans

Salut,

mais quand on passe le curseur, on a le fond qui change de couleur, puis seulement après le texte car le curseur finit par arriver dessus. J'aimerais que ça soit les deux en même temps.

Moi non plus je ne suis pas sûr d'avoir suivi, mais voici ce que j'ai cru comprendre :

li:hover { background-color: blue; } li:hover a { color: yellow; }

Les couleurs ont bien sûr été choisies avec soin et ne peuvent pas être modifiées.

Et pour un effet absolument OUFFISSIME on peut mettre une petite transition :

li { -webkit-transition: background-color .4s; -moz-transition: background-color .4s; -o-transition: background-color .4s; transition: background-color .4s; } li a { -webkit-transition: color .4s; -moz-transition: color .4s; -o-transition: color .4s; transition: color .4s; }

Je ne sais pas trop si ça se fait comme ça, normalement j'utilise Compass.

Lavoignat, il y a 9 ans

Bonjour,
J'ai laissé ce message sur plusieurs forums car c'était urgent. Maintenant j'ai le temps de vous répondre.

On m'a donné la réponse :
J'ai mis dans mon A un

display : block

et ça marche.

Je vais essayer l'animation. Merci beaucoup pour l'inspiration.

C'est la première fois que je laisse un message sur ce forum et je vois qu'il y a de la réactivité. Merci encore pour votre aide :)