How to change class when button fires active event

Question

How can I change class on a button when it fires active event?

Something like:

$("#invitation button").mouseover(function() {
    $(this).addClass("ui-state-hover");
}).mouseout(function() {
    $(this).removeClass("ui-state-hover");
});

but for the 'active' event.

@roasted Yes, I mean the same event that is applied when is used this pseudo class. — Jan Krakora, Apr 30 '13 at 20:38

score 1 · Accepted Answer · answered Apr 30 '13 at 20:39

1

Much cleaner:

$("#invitation").on('mousedown mouseup', 'button', function(){
    $(this).toggleClass("your-class");
});

See documentation for on() at http://api.jquery.com/on/

answered Apr 30 '13 at 20:39

Gabe

331
1
3
15

Just for clarification, it seems to be impossible to trigger the actual `DOMActive` state described in the spec. See http://stackoverflow.com/questions/8101854/activate-an-elements-active-css-pseudo-class-using-javascript#comment10044626_8102096 – Gabe Apr 30 '13 at 20:46

score 0 · Answer 2 · answered Apr 30 '13 at 20:35

$("#invitation button").mouseover(function() {
    $(this).addClass("ui-state-hover");
});
$("#invitation button").mouseout(function() {
    $(this).removeClass("ui-state-hover");
});

Change class on active(click)

$("#invitation button").mousedown(function() {
    $(this).addClass("your-class");
});
$("#invitation button").mouseup(function() {
    $(this).removeClass("your-class");
});

How to change class when button fires active event

2 Answers2