CSS transitions do not update hover state

Question

When moving objects, the freezing state is not updated (CSS rules with :hover ) until you move the mouse.

When you move DOM elements under the user's mouse (using transition or another equivalent), the freezing state is not updated until the mouse is moved. Is there a workaround for this? I don't want to go into fancy JS to fire a 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

Answer 1

This is pretty weird. IE10 seems to have the same behavior. Of the three main browsers, Firefox seems to be the only one who does what you want. (Show the freezing state of the hidden div as it becomes visible instead of moving the mouse so that it displays the freezing state)

This is clearly not what you want, but if you need a workaround, you can 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 might have a better solution using only CSS, but I thought that I would still answer your question with an answer.