Question

如何通过JavaScript（jQuery）为非锚元素触发：active状态？

在审核Section 5.11.3 of the W3C CSS2 specification时参考：hover伪选择器以了解触发a的激活，我发现以下内容让我相信它应该是可能的：

“：激活伪类在用户激活元素时应用。例如，在用户按下鼠标按钮并释放它的时间之间。”

“CSS没有定义哪些元素可能处于上述状态，或状态是如何进入和离开的。脚本可能会改变元素是否对用户事件做出反应，而不同的设备和UAs可能有不同的指向方式，或激活元素。“

感谢您的帮助！

Answer 1

您无法使用javascript触发:active之类的css伪选择器。没有可以执行的函数/处理程序，所以即使你trigger对click伪选择器集的元素css :active（例如将背景颜色设置为红色）什么都不会发生。

Answer 2

我在搜索完全相同的事情时遇到了这个问题。

基本上我有一个文本区域和一个按钮。用户按Enter键时会触发button.click。但是：css中的活动选择器不会被触发，因此它不会产生相同的效果。

所以这就是我所做的。它有点多余，但有效。

在css中

/*this is for actual clicks on the button */
.Button:active {
position:relative;
top:5px;
}

/* this is for pressing enter instead of clicking the button */
.Button.activate{
position:relative;
top:5px;
}

然后在jquery

//if enter is pressed, trigger button click
$("#textArea").keydown(function(event){
if(event.keyCode == 13){
    $("#button").click();
    $("#button").addClass('activate');
}
});

//if enter is released, remove class
$("#textArea").keyup(function(event){
if(event.keyCode == 13){
    $("#button").removeClass('activate');
}
});

触发CSS：非锚元素的主动选择器

2 个答案: