Rendre la transition stable après un événement

Question

Comment puis-je faire que la transition se produise après le retrait de l'événement! Je veux redimensionner la hauteur de div lorsque hover pour être plus petit, mais je veux que la taille soit encore plus petite même lorsque je supprime hover de la div.

#header{ 
background-color: red; 
height:300px; 
width:100%; 
-moz-transition:height 500ms linear; 
-webkit-transition:height 500ms linear; 
-o-transition:height 500ms linear; 
-ms-transition:height 500ms linear; 
transition:height 500ms linear; 
} 

#header:hover{ 
height:100px; 
} 

Je veux la div avoir 100px hauteur après que la souris est dehors, je peux le faire en utilisant seulement css, ou je dois utiliser jQuery pour changer la classe ou qqch comme ça?

Answer 1

Vous ne pouvez pas créer un «stick» de survol avec uniquement CSS. Vous devrez ajouter un style de classe ou en ligne avec Javascript pour maintenir l'apparence.

Answer 2

Vous pouvez faire un "stick" de survol avec juste CSS.

@keyframes hover { 
    0% { 
    // normal styles 
    } 
    100% { 
    // hover styles 
    } 
} 

.class { 
    animation-name: hover; 
    animation-duration: 350ms; 
    animation-fill-mode: backwards; 
    animation-play-state: paused;  
} 

.class:hover { 
    animation-fill-mode: forwards; 
    animation-play-state: running; 
} 

Voir http://cdpn.io/GLjpK et http://lea.verou.me/2014/01/smooth-state-animations-with-animation-play-state/.