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

请考虑下面这段 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");
});

我想让我的链接使用它的伪类: 鼠标悬停时，按钮被点击。 我试图触发事件，如鼠标移动，鼠标进入，悬停等，但任何人的工作。 注意，我想强制使用我的 CSS 伪类: hover 规范，而不是像这样使用:

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

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

138208 次浏览
小开
最佳答案

您将不得不使用一个类，但是不要担心，它非常简单。首先，我们将把 :hover规则分配给不仅适用于物理悬浮链接，而且也适用于具有类名 hovered的链接。

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

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

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

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

小开

还有，你可以试着触发鼠标悬停。

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

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

小开

我认为我遇到的最好的解决方案是在这个 堆栈溢出上。 这个简短的 jQuery 代码允许在点击或触摸时显示所有的悬停效果。
不需要在函数中添加任何内容。

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

希望这个能帮上忙。


提交答案