Problème CSS : hover

Par JeremDevWeb, il y a 11 ans


Les bases HTML/CSS

Salut à tous, aujourd'hui j'ai un problème avec mon menu que j'ai animé en CSS3 avec la propriété<u></u> ":hover", quand on va dessus, la couleur de la partie souligné change d'opacité avec une transition de 0.5s(comme menu de grafikart un peu..) quand je retire la souris, la couleur revient comme avant mais rapidement et non avec une transition..
Pouvez-vous m'aider?

5 réponses

Nakin, il y a 11 ans

Salut,

Ca serait chouette que tu nous montres ton code en fait. :D

Mais d'après ce que je lis, je pense que tu as mis la transition uniquement sur ton hover, du coup elle ne s'applique pas dans les autres états de ton lien.
Met ta transition sur ton lien quand il n'a pas d'état.

See you !

JeremDevWeb, il y a 11 ans

Voici mon code :

#menu {margin-left: 30px;float: left;font: 18px Calibri;}
#menu a {color: #FFF;text-decoration: none;}
#menu li {height:70px;padding:0 10px 0 10px;list-style-type: none;display: inline-block;padding-top: 27px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
#menu li:hover {background-color: #3D3D3D;transition:0.5s;}

Donc quand on va sur #menu li le hover change la couleur en #3D3D3D mais quand je retire la souris sa se remet comment avant sans transition sa fais moins sympa..!

Nakin, il y a 11 ans

Lis ce que je t'ai mis plus haut, l'erreur vient bien de la.

Tu as mis ta transition uniquement sur ton :hover.

#menu li {height:70px;padding:0 10px 0 10px;list-style-type: none;display: inline-block;padding-top: 27px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;transition:0.5s;}
#menu li:hover {background-color: #3D3D3D;}

Essaye comme ça !

JeremDevWeb, il y a 11 ans

Oh j'avais pas compris ton message, que j'suis con ! Merci pour l'aide ;)

JeremDevWeb, il y a 11 ans

Tu habites à Athis-Mons j'ai vu sur ton site web, eh bien j'habite à Draveil moi :)