6217

IE9 not removing :hover style on DOM change

Question:

I am trying to make a button that has a :hover state on a popup box, when you one of the buttons I am removing the box from the DOM and saving it for future interacts. the problem is when I reattach it to the DOM in IE9 it has not cleared the :hover state until you next hover it then mouse out.

Obviously this is not present on any other browser, but is reproducible here: <a href="http://jsfiddle.net/5dXSp/" rel="nofollow">http://jsfiddle.net/5dXSp/</a>

I cant find a manual way of clearing a css :hover state, and I really dont want to have to rebuild the menu every time because of this. Any thoughts?

Answer1:

Try controlling the hover with a class and jQuery. This seemed to work for me: <a href="http://jsfiddle.net/5dXSp/25/" rel="nofollow">http://jsfiddle.net/5dXSp/25/</a>

CSS:

.box{ height:200px; margin:10px 0; } .button{ display:block; width:200px; height:20px; background:#ccc; } .hover { background-color: #000; }​

jQuery:

$(".button").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } ); $(".button").click(function(ev){ ev.preventDefault(); $(ev.target).appendTo($(".catch")); $(this).removeClass("hover"); });

Answer2:

There is one additional way to fix it. You can hide element before detaching it from DOM, but <em>in a different event processing</em>. Something like that:

// HTML structure: <div id="aaa"> <a id="bbb"> Text </a> </div> var bbb = document.getElementById('bbb'); var container = document.getElementById('aaa'); bbb.attachEvent("onclick", function() { bbb.style.display = "none"; window.setTimeout(function() { container.removeChild(bbb); bbb.style.display = ""; // Some time later window.setTimeout(function() { container.appendChild(bbb); }, 2000); }, 1); });

bbb.style.visibility = "hidden" worked too.

Answer3:

using jquery you can do ugly things like:

if($.browser.msie) $('el').html($(el).html());

to de and attach the element

Recommend

  • Converting Number to Comma Separated Values
  • Android EditText change focus after validation and showing the error in a Dialog
  • how to use the same method of jquery scrollTop with css3
  • Multiple materials with JSONLoader?
  • Not working Orientation Notifications in VIewController under modal, with iOS5
  • Sitecore 8: Number of Recipients in List Manager not calculating properly
  • Why isn't my mobile website auto-resizing for mobile devices?
  • Kendo UI Timepicker custom interval format
  • How to stop auto-refreshing of SBT modules upon opening project in IDEA?
  • How will Roslyn help me in avoiding a recompile to deploy changes to my ASP.NET website?
  • how to read a file in prolog?
  • Deduce parent class of inherited method in C++
  • Merge Module leaving files during uninstall
  • HttpURLConnection.getOutputStream() takes 20 seconds. Why?
  • How do I retrieve the user information of a user authenticated with Apache's mod_ldap?
  • Clear fused location provider's location for testing
  • Hide HTML elements without javascript, only CSS
  • Suppressing passwd when calling sqlplus from shell script
  • Security issues with PHP's Readfile method
  • Bypass multiple inheritance in Java
  • wxPython: displaying multiple widgets in same frame
  • Transactional Create with Validation in ServiceStack Redis Client
  • Deleting and Updating values from a cusrsor adapter
  • How would I use PHP exceptions to define a redirect?
  • Window Size for Mac application
  • Does CUDA 5 support STL or THRUST inside the device code?
  • Do I've to free mysql result after storing it?
  • VB.net deserialize, JSON Conversion from type 'Dictionary(Of String,Object)' to type '
  • Acquiring multiple attributes from .xml file in c#
  • Java static initializers and reflection
  • Can Visual Studio XAML designer handle font family names with spaces as a resource?
  • How can I remove ASP.NET Designer.cs files?
  • python draw pie shapes with colour filled
  • Are Kotlin's Float, Int etc optimised to built-in types in the JVM? [duplicate]
  • unknown Exception android
  • Is there any way to bind data to data.frame by some index?
  • Observable and ngFor in Angular 2
  • How can i traverse a binary tree from right to left in java?
  • Unable to use reactive element in my shiny app
  • Converting MP3 duration time