Triggering CSS :active Selector For Non-anchor Elements

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 sele

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

Solution 2:

You can't trigger a css pseudo selector like :active with javascript. There is no function / handler which could be executed, so even if you trigger a click on an element which has a css :active pseudo selector set (setting the background color to red for instance), nothing is going to happen.