Pseudo classe (CSS)

Question

Bonjour, 

Je voudrais savoir si il est possible de faire l'effet contraire de hover.

Prenons l'exemple de ce que j'essaye de faire:

.classExemple:hover{
     transform:scale(1.2);
     transition : all 1s;
}


après avoir agrandie le bouton je voudrais une transition de 1s durant lequel il redevient à taille normal.
Mais je ne trouve pas comment faire

Merci pour votre temps et bonne journée à vous.


Configuration: Windows / Chrome 97.0.4692.71

Pitet · Answer

Bonjour,

Si tu veux utiliser la même transition que lors du hover, tu peux simplement déplacer la propriété transition sur ta classe sans utiliser la pseudo-classe hover :

.classExemple {
    transition: all 1s;
}

.classExemple:hover {
    transform: scale(1.2);
}


Si tu veux une transition différente, tu peux surcharger la propriété transition pour l'état hover :

.classExemple {
    transition: all 0.5s ease-in-out;
}

.classExemple:hover {
    transform: scale(1.2);
    transition: all 1s linear;
}

Pseudo classe (CSS)

1 réponse

Discussions similaires

Newsletters