: DOM 요소를 이동할 때 지속성 유지

Question

마우스 아래에서 DOM 요소를 이동할 때 CSS : hover 상태는 마우스 포인터가 이동 될 때까지 계속 유지됩니다.

http://jsfiddle.net/mMzPd/ (사용자까지 클릭 마우스를 이동 한 후 div 요소는 빨간색으로 표시됩니다.) 나는 호버를 끄거나 할 때 DOM 요소 이동 가져가 상태를 재설정 권장하는 솔루션을 찾고 있어요

. 또는 사용자가 요소를 클릭 할 때

자바 스크립트를 통해 CSS 상태를 직접 제어 할 수 없다는 것을 이해했습니다. 현재 가장 좋은 해결책은 Jquerys mouseenter() 및 mouseleave()를 사용하여 HTML 클래스를 전환하는 것입니다. 나는이 수정을 우아하게 찾지도 못했고, 자바 스크립트가 비활성화 된 브라우저로 잘 확장되지도 않는다.

모든 솔루션 가까이 거기에 순수한 CSS는에

$('div').mouseenter(function(){ 
    $(this).addClass('hover'); 
}); 

$('div').mouseleave(function(){ 
    $(this).removeClass('hover'); 
}); 

$('div').click(function(){ 
    $(this).animate({'margin-top':'100px'}); 
    $(this).removeClass('hover'); 
}); 

(http://jsfiddle.net/mMzPd/4/)? Javascript에서 스타일 규칙을 지키려는 것이 이상적입니다.

이 문제는 Chrome 및 Internet Explorer에 표시됩니다. 파이어 폭스는 : hover를 "올바르게"토글합니다.

Answer 1

다음에 다른 가상 클래스 선택기를 사용하면 어떻습니까?

div:active{ 
    background-color:green; 
} 

http://jsfiddle.net/mMzPd/6/