Question

在谷歌浏览器中，按住鼠标左键时不会触发CSS悬停状态，如下所示：

a:hover {
  color: red;   
}

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

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

在FF8或IE9中都不会发生此问题。这是有问题的，因为我正在实现拖放操作并使用CSS突出显示放置目标。我可以在JavaScript中非常简单地做到这一点，但对于本质上是CSS问题而言，这似乎很苛刻。这有什么变通方法吗？

Answer 1

从一点点开始，如果在元素上移动时按住左按钮，则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进行测试。

Answer 2

我也检查了Safari和Opera，它们的行为与IE9和Firefox一样。 Chrome浏览器似乎是唯一一种行为方式的浏览器。我能够获得所需行为的唯一方法是使用Javascript。使用：active伪类的建议肯定不起作用，我认为他们误解了这个问题。奇怪的是，：当按住鼠标右键而不是左键时，鼠标悬停在Chrome中。去图。

Answer 3

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

Answer 4

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

Answer 5

现在（2018年），尽管该错误仍在Chrome中仍然存在，但您可以使用HTML5拖放的dragenter和dragleave事件来解决它。如果您有嵌套的dom元素，则可以应用计数器来缓解鼠标悬停在子元素上方时发生的dragleave事件。

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,h2 { display:inline }

<h1>hover over me<span>, and me</span></h1>
<br>
<h2 draggable=true>drag me</h2>

Answer 6

您正在寻找：active伪类。：hover仅在鼠标悬停节点时激活。：active仅在选择或单击节点时触发。

这是jsFiddle：http://jsfiddle.net/RHGG6/21/

当按住鼠标左键时，Chrome不会应用css悬停样式

6 个答案: