触发CSS：非锚定元素的活动选择器 [英] Triggering CSS :active selector for non-anchor elements

问题描述

如何通过JavaScript（jQuery）触发非锚定元素的活动状态？

---

W3C CSS2规范的第5.11.3节引用：hover伪选择器来看看触发激活的a，我遇到了以下让我相信应该是可能的：

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

CSS不定义哪些元素可能处于上述状态，或状态如何输入和离开脚本可能会更改元素是否响应用户事件，不同的设备和UA可能有不同的方式指向或激活元素。

感谢您的帮助！

解决方案

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

我有一个文本区域和一个按钮。 button.click在用户按enter键时触发。但是：css中的活动选择器没有被触发，所以它不会产生相同的影响。

所以这是我做的。它有点多余，但工作。

  / < *这是为按钮的实际点击* / 
 .Button：active {
 position：relative; 
 top：5px; 
} 
 
 / *这是用于按回车而不是点击按钮* / 
 .Button.activate {
 position：relative; 
 top：5px; 
} 
  

然后在jquery中

  //如果按下enter，触发按钮点击
 $（＃textArea）。keydown（function（event）{
 if（event.keyCode = = 13）{
 $（＃button）。click（）; 
 $（＃button）。addClass（'activate'）; 
} 
} ; 
 
 //如果enter被释放，删除类
 $（＃textArea）。keyup（function（event）{
 if（event.keyCode == 13）{ 
 $（＃button）。removeClass（'activate'）; 
} 
}）; 
  

How do I trigger the :active state for non-anchor elements via JavaScript (jQuery)?

---

While reviewing Section 5.11.3 of the W3C CSS2 specification in reference to :hover pseudo selector to see about triggering the activation of a , I came across the following which led me to believe it should be possible:

"The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it."

"CSS does not define which elements may be in the above states, or how the states are entered and left. Scripting may change whether elements react to user events or not, and different devices and UAs may have different ways of pointing to, or activating elements."

Thanks for the assist!

解决方案

i came across this question while searching for the exact same thing.

basically i have a text area and a button. button.click is triggered when the user press enter. however the :active selector in css is not triggered so it doesnt give the same affect.

so this is what i did. its a little redundant but works.

in the 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;
}

then in 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：非锚定元素的活动选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！