http://www.impressivewebs.com/css3-transitions-javascript/ इस आलेख में एक डेमो है जो दिखाता है कि आप एक कक्षा को जोड़ने/हटाने के लिए एनीमेशन को कैसे जा सकते हैं। आप क्या कर सकते हैं अपने वर्तमान :hover को गिरावट के रूप में स्थान पर रखें, लेकिन जावास्क्रिप्ट वाले लोगों के लिए, एक ही शैलियों को pseudoHover या किसी वर्ग पर लागू करें।
फिर साथ जावास्क्रिप्ट (jQuery नीचे दिखाया गया है) जब आप तत्व पर ले जाएं, यहाँ बहुत ही बुनियादी उदाहरण वर्ग जोड़ने के लिए,: http://jsfiddle.net/btg5y/
HTML:
<div id="list">
<p>Hover over me!</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
<p>Click anywhere here to remove the hover</p>
जे एस:
$('#list').hover(function() {
$('ul', this).addClass('pseudoHover');
});
$(document).click(function() {
$('#list ul').removeClass('pseudoHover');
});
सीएसएस:
ul {
background-color: #F00;
height: 0;
overflow: hidden;
transition: height 1s;
-webkit-transition: height 1s;
}
#list:hover ul, .pseudoHover {
height: 50px;
}
जावास्क्रिप्ट का उपयोग केवल आपके द्वारा आवश्यक राज्य को बनाए रखने के लिए कक्षा को जोड़ने और निकालने के लिए किया जाता है। यदि आपके पास जावास्क्रिप्ट नहीं है, तो केवल :hover काम करेगा।
इसके अलावा, मैं नहीं देख सकता कि आप केवल सीएसएस के साथ ऐसा कैसे करेंगे।