Chrome浏览器不会应用CSS hover样式

在谷歌浏览器中，当鼠标左键按住CSS悬停状态没有被触发，如下所示：Chrome浏览器不会应用CSS hover样式

a:hover { 
 
    color: red; 
 
}

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

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

此问题不会发生在任何FF8或IE9。这是有问题的，因为我正在实施拖放操作并使用CSS来突出显示放置目标。我可以在JavaScript中做到这一点很平凡，但对于本质上是CSS问题的人来说，这看起来很笨拙。是否有任何解决方法？

来源

2011-11-08 sslepian

它有什么不同？有人应该按住鼠标左键的唯一原因是在页面上突出显示文本或其他内容。你担心一些无关紧要的事情。 – Purag

在拖动操作过程中按住鼠标左键。 – Chris

这不是[与Chrome的文本选择冲突]（http://stackoverflow.com/questions/11106955/change-cursor-over-html5-canvas-when-dragging-in-chrome），是吗？ –

当我使用Chrome 17.0.948.0（Developer Build 111321）Ubuntu 10.04进行鼠标悬停时，链接变为红色，因此您可能需要更新Chrome。在相关说明中，hover伪类适用于鼠标指针正在HOVERED的元素。如果在单击链接时按住鼠标按钮的同时应用样式，请使用：active伪类。我不确定为什么FF和IE的行为不同。

来源

2011-12-13 01:08:32

当鼠标左键被按下时，是不是应该处于活动状态的元素？这里的区别在于Firefox和IE允许从悬停状态继承活动状态，而Chrome则不允许。在CSS中，活动状态可以使用：active伪类进行控制。您需要明确设置活动状态的样式以确保浏览器之间的一致性。

来源

2012-01-08 04:13:52 user372719

我检查了Safari和Opera，它们的行为就像IE9和Firefox一样。 Chrome浏览器似乎是唯一可以这种方式运行的浏览器。我能够得到所需行为的唯一方法是使用Javascript。对于：active伪类的建议绝对行不通，我认为他们误解了这个问题。奇怪的是，当按住鼠标右键时，鼠标悬停在Chrome中，而左键不是。去搞清楚。

来源

2012-03-30 05:51:26 supercoco

-3

您正在寻找：active伪类。：悬停只会在节点被鼠标悬停时激活。：只有当节点被选择或点击时，激活才会触发。

这里的的jsfiddle：http://jsfiddle.net/RHGG6/21/

来源

2012-06-06 19:02:35 Casualbot

不知道为什么有人高估了这一点。它没有解决这个问题（猜想肖恩误解了）。 – logidelic

从一个小打转转，看来，如果在移动元素时左键保持在Windows7中的Chrome 30.0.1599.69 M不产生MouseEnter事件。因此，依靠onmouseenter事件给出与使用css相同的结果 - 也许这个（非触发）事件用于向css引擎发出某些需要更改的信号。

无论如何，你可以添加代码来处理mousemove和mouseout事件。我只是用js设置文本颜色，尽管切换类的东西可能是更好的选择。至少js会使用css应该使用的时间，所以它不会全部开销，尽管它在每次鼠标移动时都会重新执行它。

也许你可以在你想要删除的处理程序中使用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>

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

来源

2013-10-17 06:18:32 enhzflep

目前这是一个可以接受的解决方法，但如果您遇到以下问题，请投票解决它：https://bugs.chromium.org/p/chromium/issues/detail?id=122746 –

Chrome浏览器不会应用CSS hover样式

回答

相关问题