Hover state on animated element

Question

Browser vendors seem to implement :hover in a very broken way: They only change element states when the mouse moves, but not when elements move (CSS animations, etc.). So, say if you click on an element that has a :hover rule that makes it light up, and by clicking you trigger a CSS animation that moves the element away from the mouse pointer, the element will still stay in the :hover state, which is of course completely wrong.

I've now implemented my own mouseover handling in a requestAnimationFrame callback where I check all elements against mouse position, but seriously, this can't be necessary? Isn't there a way to fix :hover?

Full example:

div {
  position: absolute;
  top: 5rem;
  left: 10rem;
  width: 3rem;
  height: 3rem;
  background: red;
  transition: left 0.5s;
}
div.moved {
  left: 30rem;
}
div:hover {
  background: green;
}

<div onclick="this.classList.toggle('moved')"></div>

I've read the arguments in the comments regarding wasting CPU cycles for constantly checking the hover states of all elements on the page. However, as I said I've implemented this in Javascript (!) inside a requestAnimationFrame callback, and I don't notice any measurable decrease in performance. Surely if this were implemented inside the browser's engine, there would be no impact on performance at all. Shouldn't browser vendors implement this correctly, now that it's 2015?

Answer 1

hover is a relatively old CSS feature and is set from a time when the only moving part of a web page was the cursor, so there's no sense in having hover constantly checking if cursor is OVER the item, that's processor wasteful, and would have been considered excessive in a time when elements on a page did not move.

Instead it checks if the cursor is over the element when the cursor moves. This is far less appropriate for moving attributes as you say, but does make sense from a code writing point of view, when it was written there was no need to consider the alternative issues of element movement.

There is no way to immediately update the CSS behaviour itself as this is pretty much coded out of reach of Site designers, so using javascript is your only real solution.

You can report this as a bug but this will probably only get corrected as either a new selector ability such as :HoverUpdate [unlikely] or will be coming out with CSS4 (I have no idea the status of CSS4, if this really hasn't been noted by those associated with it, then it may even be a CSS5 thing).

There are various issues to changing the core behaviour of hover on the fly or in a non-centralised way - mainly that each different browser engine might adapt the changes in different ways and different versions (We've already found that Firefox handles the :hover selector somewhat haphazardly).

The point is, it's not something that can or should be cleanly fixed by the Browsers themselves but should be fixed within the definitions/code of CSS itself as set out by W3C.

On the flip side, those users with mice move them around so much (even just a pixel or two) that it's somewhat questionable your situation outside of a game, where there is a need for the mouse to be in a frozen position and for the hover selector to be constantly checked, as you seem to have already done, I think roll it with Javascript can take care of this as a relative edge case and in a couple of years CSS4 might have a built in solution.

Next Steps

• Report a Bug to each browser builder
• Report a feature request to W3C for it as a CSS-4 specification
• Possibly explore if there is a way to get browser plugins to solve this issue (again, haphazard).
• Use Javascript.