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 transit

Solution 1:

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.