CODEWITHSUNDEEP
htmlcss-transitions
Forest Katsch
Forest Katsch

Reputation: 1555

CSS transitions don't update the hover state

When you transition objects, the hover state doesn't get updated (CSS rules with :hover) until you move the mouse.

When you move DOM elements beneath the users' mouse (with transition or some other equivalent) the hover state doesn't update until the mouse moves. Is there any workaround for this? I don't want to get into fancy JS to fire the 'mouseover' event.

JSFiddle: http://jsfiddle.net/forestka/8xJkR/1/

HTML:

<div id="below">
  This is the one below. (Now move the mouse.)
</div>
<div id="hover">
  Click me! (But don't move the mouse after you click)
</div>

CSS:

#hover:hover,
#below:hover {
  background-color: #f00;
}

#below {
  padding:10px;
  position: absolute;
  top:0;
  left:0;
}

#hover {
    background-color: #ddd;
    padding: 10px;
    position: absolute;
    left: 0;
    top:0;
    transition: top 1s ease;
    z-index: 100;
}

#hover.hidden {
    top: 50px;
}

Side note: SO won't let me insert a JSFiddle link without code??

Upvotes: 4

Views: 872

Answers (1)

Gaff
Gaff

Reputation: 5657

That's pretty odd. IE10 seems to have the same behavior as well. Of the major 3 browsers, Firefox seems to be the only one that does what you want it to. (Show the hover state of the hidden div as it becomes visible instead of having to move the mouse to get it to show the hover state)

This is obviously not what you're wanting, but if you need a workaround you could do something like this:

$("#hover").click(function() {
    $("#hover").addClass("hidden");
    $("#below").trigger("mouseover");
});

$("#below").hover(function() {
     $("#below").css("background-color", "#f00");
}, function () {
    $("#below").css("background-color", '');
});

JS Fiddle Demo

Someone may have a better solution using only CSS, but I thought I'd give your question a bump with an answer anyway.

Upvotes: 1

Related Questions