jquery - 如何使用 jQuery 强制悬停状态？

Question

请考虑这个 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");

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

Answer 1

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

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

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

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

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