Chrome won't apply css hover style when left mouse button is held down

Question

In Google Chrome, the CSS hover state isn't being triggered when the left mouse button is held down, as shown here:

a:hover {
  color: red;   
}

<a href="http://www.jsfiddle.net">words</a>

http://jsfiddle.net/RHGG6/1/

This issue doesn't occur in either FF8 or IE9. It's problematic because I'm implementing a drag-and-drop action and using CSS to highlight the drop target. I could do this pretty trivially in JavaScript, but that seems heavy-handed for what is essentially a CSS problem. Are there any workarounds to this?

Answer 1

From a little playing around, it seems that Chrome 30.0.1599.69 m on windows7 doesn't generate a mouseenter event if the left button is held when moving over an element. As such, relying on the onmouseenter event gives the same result as using css - perhaps this (non-triggered) event is used to signal the css engine that something needs to change.

Anyhow, you can just add code to handle mousemove and mouseout events. I simply set the text colour with the js, though something that toggled a class would probably be a better option. At least the js will be using the time that the css should have been using, so it won't all be overhead, although it does suck redoing it all anytime the mouse moves.

Perhaps you could use removeEventListener from inside the handler you're trying to remove. If so, you could attach the js to handle the events with addEventListener, attaching to both events on page load. When the onmousemove event was triggered, you could change the style and then remove the handler. Then, when the mouseout event fired, you could restore the style and re-attach the onmove handler. I wouldn't be surprised if trying to remove a handler from an event, from within the handler itself would fail, but one can only try. It would only add a few bytes to the js, but would improve efficiency (in terms of the link, not the whole page) tremendously - from potentially very poor if the mouse was moved over the link a lot to 100% - i.e the style is set exactly once and cleared exactly once per enter/leave cycle.

<a href="http://www.jsfiddle.net" onmousemove = "this.style.color='red'" onmouseout = "this.style.color=''">words</a>

Works for me - Note: only tested with chrome in win7.

Answer 2

I checked in Safari and Opera as well and they behave just like IE9 and Firefox. It seems Chrome is the only browser that behaves this way. The only way I was able to get the desired behavior was using Javascript. The suggestions with the :active pseudo class definitely don't work, I think they misunderstand the problem. Strangely, :hover in Chrome works when the right mouse button is being held down and not when the left button is. Go figure.