イベントが発生した後で遷移を安定させる

Question

イベントが削除された後でも遷移を起こさせる方法を教えてください。 hoverを小さくするとdivの高さのサイズを変更したいのですが、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; 
} 

私はそれが唯一のCSSを使用して作ることができ、マウスが出た後のdivは100pxに高さを持つようにしたい、または私はそのようなクラスやSTHを変更するためにjQueryを使用する必要がありますか？

Answer 1

CSSだけでホバー「スティック」を作ることはできません。外観を維持するには、Javascriptでクラスまたはインラインスタイルを追加する必要があります。

Answer 2

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; 
} 

はhttp://cdpn.io/GLjpKとhttp://lea.verou.me/2014/01/smooth-state-animations-with-animation-play-state/を参照してください。