3 button state - normal, rollover (on hover), active (on click) with jquery?

Question

I'm using the following code to get my buttons to change to their rollover state when hovered over.

$('.button').hover(function(){
$(this).css('background-position', '0 -23px');
}, function(){
$(this).css('background-position', '0 0px');
});

with the .button class applied to all the button divs, using the background-position function where all the background images have all three states in the same image - at '0 0px' show the normal state, at '0 -23px' shows the rollover state, and at '0 -46px' shows the active state.

I'm trying to figure out how to get my buttons to show their active states when they are clicked, while having all other .button buttons go back to their normal states. I've tried the following code which changes the buttons to their active states, but when the mouse is moved off the buttons they go back to their normal states.

$('.button').click(function(){
$(this).css('background-position', '0 -46px');
});

Thanks!

Answer 1

You can add Class for this, like:

Add thi in your CSS

.active{background-position:0 -46px !important;}

And in Jquery use it like

$(document).ready(function(){
    $('.button').click(function(){
        $(this).toggleClass('active');
    });
});

Read Docs http://api.jquery.com/toggleClass/

Answer 2

The best thing to do would be simple css implementation.

.button
{
    //your css
}
.button:active
{
    //your css
}
.button:hover
{
    //your css
}

Hope it helps :)

Answer 3

You can use the pseudo class a:active {background-img: - ;background-position: 0 -46px;}

Answer 4

Now if you used to callback function in jquery than used to this formate ..

$('.button').hover(function(){
  $(this).css('background-position', '0 -23px', function(){
    $(this).css('background-position', '0 0');
  });
});

More about Call Back Function