In Google Chrome, the CSS hover state isn't being triggered when the left mouse button is held down, as shown here:
在Google Chrome中，按住鼠标左键时不会触发CSS悬停状态，如下所示：
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?
FF8或IE9中不会发生此问题。这是有问题的，因为我正在实施拖放操作并使用CSS来突出显示放置目标。我可以在JavaScript中非常简单地做到这一点，但这对于本质上是一个CSS问题来说似乎很苛刻。这有什么变通方法吗？
5 个解决方案
#1
3
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.
从一点点玩起来，如果在元素上移动时保持左按钮，则windows7上的Chrome 30.0.1599.69 m似乎不会生成mouseenter事件。因此，依赖于onmouseenter事件会产生与使用css相同的结果 - 也许这个（非触发）事件用于向css引擎发出需要改变的信号。
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.
无论如何，您只需添加代码来处理mousemove和mouseout事件。我只是用js设置文本颜色，虽然切换类的东西可能是更好的选择。至少js将使用css应该使用的时间，所以它不会全部是开销，尽管它在鼠标移动的任何时候都会重做它。
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.
也许你可以在你想要删除的处理程序中使用removeEventListener。如果是这样，您可以附加js以使用addEventListener处理事件，并在页面加载时附加到这两个事件。触发onmousemove事件时，您可以更改样式，然后删除处理程序。然后，当mouseout事件触发时，您可以恢复样式并重新附加onmove处理程序。如果尝试从事件中删除处理程序，从处理程序本身内部将失败，我不会感到惊讶，但只能尝试。它只会向js添加几个字节，但会极大地提高效率（就链接而言，而不是整个页面） - 如果鼠标在链接上移动很多到100％，则可能非常差 - 即样式设置恰好一次，每个进入/离开循环清除一次。
<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.
适合我 - 注意：仅在win7中使用chrome进行测试。
#2
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.
我也检查了Safari和Opera，它们的行为就像IE9和Firefox一样。 Chrome浏览器似乎是唯一一种行为方式的浏览器。我能够获得所需行为的唯一方法是使用Javascript。使用：active伪类的建议肯定不起作用，我认为他们误解了这个问题。奇怪的是，：当按住鼠标右键而不是左键时，鼠标悬停在Chrome中。去搞清楚。
#3
0
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.
当我使用Chrome 17.0.948.0（Developer Build 111321）Ubuntu 10.04鼠标悬停它时，该链接变为红色，因此您可能需要更新Chrome。在相关的说明中，：hover伪类适用于鼠标指针处于HOVERED的元素。要在单击链接时按住鼠标按钮时应用样式，请使用：active伪类。我不确定为什么FF和IE表现不同。
#4
0
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.
当你的鼠标左键按下时，是不是应该处于活动状态的元素？这里的区别在于Firefox和IE允许活动状态从悬停状态继承，而Chrome则不允许。在CSS中，可以使用：active伪类来控制活动状态。您需要显式设置活动状态的样式，以确保浏览器之间的一致性。
#5
-3
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.
您正在寻找：active伪类。 ：hover仅在鼠标悬停节点时激活。 ：active仅在选择或单击节点时触发。
Here's the jsFiddle: http://jsfiddle.net/RHGG6/21/
这是jsFiddle：http：//jsfiddle.net/RHGG6/21/
#1
3
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.
从一点点玩起来，如果在元素上移动时保持左按钮，则windows7上的Chrome 30.0.1599.69 m似乎不会生成mouseenter事件。因此，依赖于onmouseenter事件会产生与使用css相同的结果 - 也许这个（非触发）事件用于向css引擎发出需要改变的信号。
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.
无论如何，您只需添加代码来处理mousemove和mouseout事件。我只是用js设置文本颜色，虽然切换类的东西可能是更好的选择。至少js将使用css应该使用的时间，所以它不会全部是开销，尽管它在鼠标移动的任何时候都会重做它。
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.
也许你可以在你想要删除的处理程序中使用removeEventListener。如果是这样，您可以附加js以使用addEventListener处理事件，并在页面加载时附加到这两个事件。触发onmousemove事件时，您可以更改样式，然后删除处理程序。然后，当mouseout事件触发时，您可以恢复样式并重新附加onmove处理程序。如果尝试从事件中删除处理程序，从处理程序本身内部将失败，我不会感到惊讶，但只能尝试。它只会向js添加几个字节，但会极大地提高效率（就链接而言，而不是整个页面） - 如果鼠标在链接上移动很多到100％，则可能非常差 - 即样式设置恰好一次，每个进入/离开循环清除一次。
<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.
适合我 - 注意：仅在win7中使用chrome进行测试。
#2
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.
我也检查了Safari和Opera，它们的行为就像IE9和Firefox一样。 Chrome浏览器似乎是唯一一种行为方式的浏览器。我能够获得所需行为的唯一方法是使用Javascript。使用：active伪类的建议肯定不起作用，我认为他们误解了这个问题。奇怪的是，：当按住鼠标右键而不是左键时，鼠标悬停在Chrome中。去搞清楚。
#3
0
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.
当我使用Chrome 17.0.948.0（Developer Build 111321）Ubuntu 10.04鼠标悬停它时，该链接变为红色，因此您可能需要更新Chrome。在相关的说明中，：hover伪类适用于鼠标指针处于HOVERED的元素。要在单击链接时按住鼠标按钮时应用样式，请使用：active伪类。我不确定为什么FF和IE表现不同。
#4
0
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.
当你的鼠标左键按下时，是不是应该处于活动状态的元素？这里的区别在于Firefox和IE允许活动状态从悬停状态继承，而Chrome则不允许。在CSS中，可以使用：active伪类来控制活动状态。您需要显式设置活动状态的样式，以确保浏览器之间的一致性。
#5
-3
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.
您正在寻找：active伪类。 ：hover仅在鼠标悬停节点时激活。 ：active仅在选择或单击节点时触发。
Here's the jsFiddle: http://jsfiddle.net/RHGG6/21/
这是jsFiddle：http：//jsfiddle.net/RHGG6/21/