CSS Hover style remains after mouse is no longer hovering

css, hover, internet-explorer-8, safari

Solution

This was an interesting issue to solve. And while the solution is a bit hacky, it works. After setting the HTML to "boo" we clone the entire row, insert it, and remove the old one:

$(function() {
  $("table").on("click", "td", function() {
    $("#menu")
        .clone()
        .one("click", function() {
              var $td = $(this).closest("td"),
                  $tr = $td.parent();

              $td.html("boo");
              $tr.clone(/* true */).insertAfter($tr);
              $tr.remove();
              return false;
        })
        .appendTo(this)
        .show();
  });
});

http://jsfiddle.net/ryanwheale/3BUaT/26/

Problem

The following happens in Safari Version 7.0.1 and IE8. Steps to reproduce the problem: http://goo.gl/lP3Ky1 Problem: The row's hover state remains after dismissing the popup menu, and it will not go away no matter where the mouse is, until you hover over it again. What is the expected behavior? The row's hover state should go away after dismissing the popup menu. Does anybody know a fix for Safari Version 7.0.1 and IE8? I would be okay with some manual way to "untrigger" the css hover state.

Original source