28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème avec le li:hover

Bonjour,
Je suis entrain de créer mon premier site en 
HTML
et en 
CSS
et je suis bloquer sur une mécanique.
Je souhaite que lorsque l'on clique sur un de mes boutons d'accueil il y ait une petite animation qui rend le bouton plus foncé.
J'ai ainsi écrit le code suivant :
upload/1550751498-74569-photo1.png
Et voilà ce que cela me donne :
upload/1550751524-74569-photo2.png
J'aimerai savoir comment faire pour que l'animation prenne tout l'espace vert et non pas une infime partie.
Cordialement
Modifié par PhillipeC (21 Feb 2019 - 13:20)
Modérateur
Salut @PhillipeC il faut juste appliquer le changement sur le bon élément. C'est ton <li> qui a un fond vert et un padding, mais au survol tu changes la couleur et le fond du <a>.
Je te suggere :
- de déplacer le background et le padding du .btn sur le <a> directement.
- de mettre le hover directement sur le <a> et pas sur le .btn

(et +1000 pour JENCAL pour le code en ligne, c'est la meilleure chose a faire si tu veux une aide rapide. Une image de code c'est l'avant dernière des choses à faire, la dernière étant l'absence de code hahaha Smiley lol )
Modifié par _laurent (21 Feb 2019 - 16:08)
_laurent a écrit :
Salut @PhillipeC il faut juste appliquer le changement sur le bon élément. C'est ton li quia un fond vert et on padding, mais au survol tu change la couleur et le fond du

Hello

Pourtant au survol il est bien sur le <li>

li.btn:hover


Par contre effectivement c'est à cause du padding ^^
Modérateur
nav.menu ul li.btn:hover a {
    background-color: white;
}


Au survol du li oui mais la couleur de fond s'applique au <a> alors que la couleur verte de base a été donné au <li>. Si on change la couleur du même élément on a pas ce genre de surprise ! Smiley lol
Modifié par _laurent (21 Feb 2019 - 16:07)
_laurent a écrit :
Salut @PhillipeC il faut juste appliquer le changement sur le bon élément. C'est ton &lt;li&gt; qui a un fond vert et un padding, mais au survol tu changes la couleur et le fond du &lt;a&gt;.
Je te suggere :
- de déplacer le background et le padding du .btn sur le &lt;a&gt; directement.
- de mettre le hover directement sur le &lt;a&gt; et pas sur le .btn

(et +1000 pour JENCAL pour le code en ligne, c'est la meilleure chose a faire si tu veux une aide rapide. Une image de code c'est l'avant dernière des choses à faire, la dernière étant l'absence de code hahaha Smiley lol )
Bonjour Laurent merci pour ta réponse mon code marche parfaitement désormais
Cordialement
JENCAL a écrit :

Hello

Pourtant au survol il est bien sur le &lt;li&gt;

li.btn:hover


Par contre effectivement c'est à cause du padding ^^
Oui effectivement mon problème venait du fait que j'avais attribué le padding et le background à nav. ul li.btn {} et non au au <a>
En tout merci pour ton aide Smiley lol et le conseil d'un simulateur en ligne
Cordialement
_laurent a écrit :
nav.menu ul li.btn:hover a {
    background-color: white;
}


Au survol du li oui mais la couleur de fond s'applique au &lt;a&gt; alors que la couleur verte de base a été donné au &lt;li&gt;. Si on change la couleur du même élément on a pas ce genre de surprise ! Smiley lol


ah oui merde... my bad ^^
Sujet clos
Aller à