如何强制关闭悬停状态？

Posted 2023-05-08

【中文标题】如何强制关闭悬停状态？

【英文标题】：how can i force the hover state off?

【发布时间】：2012-05-21 00:39:34

【问题描述】：

我有一个带有 :hover 颜色变化的文本按钮。单击按钮会缩小它所在的 div，从而将按钮从单击它的鼠标光标下方移出。这样做会使按钮处于 :hover 状态，因此它不会变回非悬停颜色。有什么办法可以强制按钮退出悬停状态（因为我知道此时它肯定不会悬停）？

这里的jsfiddle示例：http://jsfiddle.net/forgetcolor/vYjMv/6/

【问题讨论】：

不明白你的问题..你能用示例图像解释一下，还是更“详细”的示例？

看例子。将鼠标移动到结果部分中的显示/隐藏文本“按钮”。单击按钮，但不要移动鼠标。文本的颜色保持悬停状态。我想知道如何以编程方式强制元素的悬停状态关闭（或返回到非悬停状态）当单击该事物以避免这种情况。

这里可以正常工作，就像悬停一样，如果我不移动鼠标.. 悬停时的文本颜色：红色，点击且不移动鼠标：蓝色..

也适合我。我在 Windows 上使用 Firefox 12。

为什么不使用 jQuery 切换来切换显示/隐藏？ api.jquery.com/toggle

【参考方案1】：

我不会在 CSS 中使用 :hover 选择器，而是使用 .hover 类。然后你可以显式地将这个类分配给mouseover/mouseout，并在需要时显式删除它。

这能解决您的问题吗？

更新

建议：使用jQuery的$().hover()。

【讨论】：

不能解决问题，至少在 chrome 中：jsfiddle.net/forgetcolor/vYjMv/10