当按住鼠标左键时，Chrome不会应用CSS悬停样式 [英] Chrome won't apply css hover style when left mouse button is held down

问题描述

在Google Chrome中，按住鼠标左键不会触发CSS悬停状态，如下所示：

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>

a href =http://jsfiddle.net/RHGG6/1/ =nofollow> http://jsfiddle.net/RHGG6/1/

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

此问题在FF8或IE9中不会出现。这是有问题的，因为我实现拖放操作，并使用CSS突出显示放置目标。我可以在JavaScript中这样做很简单，但是对于本质上是一个CSS问题，这似乎是沉重的。

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?

推荐答案

从一个小玩意儿，似乎Chrome 30.0.1599.69 m在windows7上' t当在元素上移动时保持左按钮时生成mouseenter事件。因此，依赖于onmouseenter事件给出了与使用css相同的结果 - 也许这个（非触发）事件用于向css引擎发信号通知需要改变的东西。

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.

无论如何，你可以只添加代码来处理mousemove和mouseout事件。我只是用js设置文本颜色，虽然切换一个类可能是一个更好的选择。至少js将使用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.

也许你可以在你要删除的处理程序中使用removeEventListener。如果是这样，您可以附加js以使用addEventListener处理事件，并在页面加载时附加到这两个事件。当onmousemove事件被触发时，您可以更改样式，然后删除处理程序。然后，当mouseout事件触发时，您可以恢复样式并重新附加onmove处理程序。我不会感到惊讶，如果试图从事件中删除处理程序，从处理程序本身将失败，但只能尝试。它只会添加几个字节到js，但会提高效率（在链接，而不是整个页面）极大 - 从潜在非常差，如果鼠标被移动到链接很多到100％ - 即风格

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>

适用于我 - 注意：仅在win7中使用chrome测试。

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

这篇关于当按住鼠标左键时，Chrome不会应用CSS悬停样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！