：移動DOM元素時懸停持久性

從鼠標下移動DOM元素時，CSS：懸停狀態保持持久狀態，直到移動鼠標指針爲止。：移動DOM元素時懸停持久性

http://jsfiddle.net/mMzPd/（點擊直到用戶移動鼠標後div元素會變成紅色。）

我正在尋找任何建議的解決方案打開懸停關閉或重置懸停狀態時的DOM元素移動。或者，當用戶點擊元素時。

我明白你不能通過JavaScript直接控制CSS狀態，所以我最好的解決方案是用Jquerys mouseenter（）和mouseleave（）切換HTML類。我沒有真正發現這個修補程序的優雅性，也不能很好地適應JavaScript禁用的瀏覽器。

$('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/）

任何解決方案更接近純CSS在那裏？理想情況下，要保留我的Javascript中的樣式規則。

此問題在Chrome和Internet Explorer中顯示。 Firefox切換：正確懸停「。

來源

2013-01-14 Tobias

你用什麼瀏覽器？當Firefox 18 + Ubuntu – Joseph

中移動時，該框將恢復爲綠色Chrome和Internet Explorer具有此行爲。不確定Opera，Safari等Firefox重置：懸停狀態。 – Tobias

哇。即使IE10也有這種行爲。瀏覽器改進非常多。 –

如何在hover後使用另一個僞類選擇器？

div:active{ 
    background-color:green; 
}

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

來源

2013-01-14 11:49:07

智能和優雅的修復。不幸的是：瀏覽器之間的焦點行爲很不一致。此解決方案適用於IE10，但不適用於Chrome。如果可能的話，我想保留其他Css狀態爲「自由」用於其他用途。儘管謝謝你的回答！ – Tobias

：移動DOM元素時懸停持久性

回答

相關問題