javascript - Triggering CSS :active selector for non-anchor elements

Question

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!

Answer 1

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');
}
});