CODEWITHSUNDEEP
cssinternet-explorer-8safarihover
Björn
Björn

Reputation: 13207

CSS Hover style remains after mouse is no longer hovering

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.

Upvotes: 5

Views: 3385

Answers (5)

Amit Joki
Amit Joki

Reputation: 59232

Its not browser's fault. Its yours. You are appending the menu list to the row. So the menu list is a child of the row. So if you hover over child, the parent will also be in hover state.

I've updated your jsfiddle:

Jsfiddle;

$(function() {
  $("td").on("click", function() {
    $("#menu")
        .clone()
        .one("click", function() {
          // this is key to reproduce it.
          $(this).closest("td").html("boo");
          return false;
        })
        .appendTo($(this).parent().parent().last())
        .show();
  });
});

Upvotes: 2

Ryan Wheale
Ryan Wheale

Reputation: 28380

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/

Upvotes: 2

Netsurfer
Netsurfer

Reputation: 5542

OK, so here is my proposed solution which takes the points from my comments (on Tejas Jayasheel's answer) into account: JSFiddle

The differences are:

  • #menu is not cloned and not added to the table cell, but instead just repositioned (so the element is also only displayed once)
  • CSS hover only applied if the 'no-js' class is present in the HTML element (need to be added in your original file)
  • otherwise hover effect is achieved by applying the class "clicked" to the cell
  • additionally when menu is already visible the hover effect is "disabled" by toggling another class on all TD's

  • clicking outside the menu on the already "clicked" cell will close/hide the menu without any further action

    .no-js td:hover,
    td.hover-enabled:hover,
    td.clicked { background-color: lightblue; }

What is the expected behavior? The row's hover state should go away after dismissing the popup menu.

Maybe ...! But keep in mind that you are heavily "confusing" the browser by removing the hovered element from DOM. I guess that Safari and IE 8 simply "do not recognize" that former hovered part isn't hovered anymore. This may or may not be a "bug". But at least it is "bad practice/ writing style" and should simply be avoided!

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.

The "fix" is shown in my example. It is a common recommendation to add, remove or toggle classes when it comes to scripting and hover. By doing so you avoid the "problem" at all. Because even in future versions of any browser the behaviour in such cases is "unpredictable" at best.

Upvotes: 1

user1741851
user1741851

Reputation:

Here is a workaround - http://jsfiddle.net/3BUaT/11/ . After going through many stackoverflow posts, understood that it is not possible to remove css pseudo class from javascript. So definitely a work around was necessary.

I'm using 

tr.hovered td {
  background-color: lightblue;
}

instead of regular CSS hover state.

The problem is that when you click on an li in menu, it's not exactly triggering mouseout event from CSS in safari. Technically speaking, you did not actually took your mouse out of the element. It's just that the element was removed. This seems like a bug in safari.

Upvotes: 2

DJSrA
DJSrA

Reputation: 817

You are appending the div #menu to the td with your function. Now the CSS is going to apply the hover state to the td when you mouseover either the td or the appended menu. Hovering over the menu applies the tr:hover td css, because the menu is now part of the td.

Upvotes: 1

Related Questions