请考虑以下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");
});
我想让我的链接使用它的伪类:当按钮被点击时悬停。我试图触发鼠标移动、鼠标输入、悬停等事件,但任何人都可以工作。注意,我想强制使用my CSS伪类:hover规范,而不是使用如下内容:
$("#link").css("color", "ccff00");
有人知道我是怎么做的吗?非常感谢。
发布于 2010-02-19 02:07:55
你将不得不使用一个类,但是不用担心,它很简单。首先,我们将分配您的:hover
规则,使其不仅应用于物理悬停的链接,而且还应用于类名为hovered
的链接。
a:hover, a.hovered { color: #ccff00; }
接下来,当您单击#btn
时,我们将在#link
上切换.hovered
类。
$("#btn").click(function() {
$("#link").toggleClass("hovered");
});
如果链接已经有这个类,它将被删除。如果它没有这个类,它将被添加。
发布于 2012-04-25 00:08:52
此外,您还可以尝试触发鼠标悬停。
$("#btn").click(function() {
$("#link").trigger("mouseover");
});
不确定这是否适用于您的特定场景,但我在各种情况下成功地触发了鼠标悬停而不是鼠标悬停。
发布于 2018-08-17 02:40:15
我认为我遇到的最好的解决方案是在这个stackoverflow上。这段简短的jQuery代码允许在点击或触摸时显示所有的悬停效果。
不需要在函数中添加任何内容。
$('body').on('touchstart', function() {});
希望这能有所帮助。
https://stackoverflow.com/questions/2290829
复制相似问题