Vurgulu düğümü yeni bir yere taşıdığımda, hala hovered olarak görüntülenir. Bunu nasıl çözebilirim?

Question

Yakınlaştırılmış bağlantıyı yeni bir yere taşıdığımda IE7 ve IE8'de hala gizli olarak görüntülenir. Firefox'ta ve Chrome bağlantısında kaydırılmamış olarak görüntülenir. Aşağıdaki örnekte bağlantıyı tıklarsanız ikinci satıra taşınır ancak yine de kırmızı olur. Bu tür davranışları düzeltmek mümkün mü?

<style> 
a { color:blue; } 
a:hover { color:red; } 
</style> 
<div id="div1"> 
    First Row 
    <a id="a1" href="javascript:void(0);" onclick="document.getElementById('div2').appendChild(this);">Click It</a> 
</div> 
<div id="div2"> 
    Second Row 
</div> 

Live example

Answer 1

Hoşuma ama düğüm klonlama ve orijinali çıkarmadan çalışmak gibi görünüyor yoktur: aslında taşımak yerine,

<a id="a1" href="javascript:void(0);" onclick="document.getElementById('div2').appendChild(this.cloneNode(true)); this.parentNode.removeChild(this);">Click It</a> 

Live example

Orada Düğüm, bunun derin bir klonunu yaparız (cloneNode(true)) ve bunun yerine ekleyelim. Sonra orijinali (this.parentNode.removeChild(this)) kaldırıyoruz. Bu, IE'nin tuttuğu durum bilgilerinin saklanmasını engelliyor gibi görünüyor.