如何使用 jQuery 强制悬停状态？答案

【问题标题】：How to force a hover state with jQuery?如何使用 jQuery 强制悬停状态？
【发布时间】：2011-01-18 10:47:16
【问题描述】：

请考虑以下 CSS 代码：

a { color: #ffcc00; }
a:hover { color: #ccff00; }

此 HTML 代码：

<a href="#" id="link">Link</a>
<button id="btn">Click here</button>

最后，这个 JS 代码：

$("#btn").click(function() {
   $("#link").trigger("hover");
});

我想让我的链接在单击按钮时使用它的伪类 :hover。我试图触发诸如 mousemove、mouseenter、hover 等事件，但任何人都可以工作。请注意，我想强制使用我的 CSS 伪类 :hover 规范，而不是使用类似的东西：

$("#link").css("color", "ccff00");

有人知道我该怎么做吗？非常感谢。

【问题讨论】：

标签： jquery css

【解决方案1】：

您将不得不使用一个类，但不用担心，它非常简单。首先，我们将分配您的 :hover 规则，使其不仅适用于物理悬停的链接，还适用于类名为 hovered 的链接。

a:hover, a.hovered { color: #ccff00; }

接下来，当您单击#btn 时，我们将切换#link 上的.hovered 类。

$("#btn").click(function() {
   $("#link").toggleClass("hovered");
});

如果链接已经有类，它将被删除。如果没有类，就会被添加。

【讨论】：

【解决方案2】：

另外，您可以尝试触发鼠标悬停。

$("#btn").click(function() {
   $("#link").trigger("mouseover");
});

不确定这是否适用于您的特定场景，但我已经成功触发鼠标悬停而不是悬停在各种情况下。

【讨论】：

【解决方案3】：

我认为我遇到的最佳解决方案是stackoverflow。这段简短的 jQuery 代码允许您在点击或触摸时显示所有悬停效果..
无需在函数中添加任何内容。

$('body').on('touchstart', function() {});

希望这会有所帮助。

【讨论】：