Jquery and the :active selector

Question

This is my code:

$('#ss a:active').parent().addClass('ss-active');

I guess you can tell from my code what I want to do, but it's not working, how can I do this? and I also want when the user removes the mouse from the button to come back to normal state, what I mean by: "the user removes the mouse from the button" is that the user can only hold click on the button for a while and it should see the:active statement.

I can't do this with css because I need the parent of that <a>.

//Here it is, how I got it working!

    $('#solicita a').mousedown(function() {
    if($(this).parent().hasClass('solicita-hover'))
    {
        $(this).parent().removeClass('solicita-hover');
        $(this).parent().addClass('solicita-active');
    }
}).mouseleave(function() {
    $(this).parent().removeClass('solicita-active');
});

Answer 1

Try using the mousedown() event:

$('#ss a').mousedown(function() {
 $(this).parent().addClass('ss-active');
}).mouseup(function() {
 $(this).parent().removeClass('ss-active');
});

Answer 2

In jQuery the ":" is a what they call a meta-character. What follows the ":" is usually jQuery selector syntax, like ":file" or ":has()".

":active" is a CSS pseudo-class so the use of ":" to denote pseudo-class is conflicting with jQuery selector syntax requirements.

All that said, you might try escaping the ":" with two backslashes as suggested in the jQuery api. I've not tried that, however.