CODEWITHSUNDEEP
cssgoogle-chromewebkit
sslepian
sslepian

Reputation: 1921

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

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?

Upvotes: 22

Views: 5789

Answers (6)

adabru
adabru

Reputation: 774

Nowadays (2018), while the bug still persists in Chrome, you can work around it using HTML5 drag&drop's dragenter and dragleave events. If you have a nested dom-element you can apply a counter to mitigate the dragleave events that occur when the mouse gets over a child element.

var h1 = document.querySelector('h1')
var counter = 0
h1.ondragenter = _=> ++counter && h1.classList.add('dragover')
h1.ondragleave = _=> --counter || h1.classList.remove('dragover')
span { font-style:italic }
h1:hover { color:red }
h1.dragover { color:blue }
<h1>hover over me<span>, and me</span></h1>
<h2 draggable=true>drag me</h2>

Upvotes: 0

enhzflep
enhzflep

Reputation: 13109

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.

Upvotes: 3

CasualBot
CasualBot

Reputation: 86

You're looking for the :active pseudo-class. :hover will only activate when the node is being hovered over by the mouse. :active will only trigger when the node has been selected or clicked on.

Here's the jsFiddle: http://jsfiddle.net/RHGG6/21/

Upvotes: -3

supercoco
supercoco

Reputation: 512

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.

Upvotes: 2

user372719
user372719

Reputation: 172

When you're left mouse button is down, isn't the element supposed to be in the active state? The difference here is that Firefox and IE are allowing the active state to be inherited from the hover state, and Chrome is not. In CSS, the active state can be controlled using the :active pseudo-class. You need to explicitly set the style for the active state to ensure consistency between browsers.

Upvotes: 0

Alexander Pavlov
Alexander Pavlov

Reputation: 32296

The link turns red when I mouseover it using Chrome 17.0.948.0 (Developer Build 111321) Ubuntu 10.04, so you might want to update your Chrome. On a related note, the :hover pseudo-class applies to an element being HOVERED by a mouse pointer. For a style to apply while the mouse button is held down while clicking the link, use the :active pseudo-class. I'm not sure why FF and IE behave differently.

Upvotes: 0

Related Questions