3 état de bouton - normal, survol (sur hover), actif (sur clic) avec jquery?

Question

J'utilise le code suivant pour que mes boutons passent à leur état de survol quand survolé.

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

avec la classe .button appliquée à tous les boutons divs, en utilisant la fonction de la position d'arrière-plan où toutes les images de fond ont tous les trois états dans la même image - à « 0 0px » montrent l'état normal, à '0 -23px' indique l'état de survol, et '0 -46px' indique l'état actif. J'essaye de comprendre comment obtenir mes boutons pour montrer leurs états actifs quand ils sont cliqués, tandis que tous les autres boutons de bouton retournent à leurs états normaux. J'ai essayé le code suivant qui change les boutons à leurs états actifs, mais quand la souris est enlevée des boutons ils retournent à leurs états normaux.

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

Merci!

Answer 1

Vous pouvez ajouter classe pour cela, comme:

Ajouter thi dans votre CSS

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

Et Jquery utiliser comme

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

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

Answer 2

Maintenant, si vous avez utilisé pour fonction de rappel dans jquery que celle utilisée à ce formate ..

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

En savoir plus sur Call Back Function

Answer 3

Vous pouvez utiliser la classe pseudo a: active {background-img: -; background-position: 0 -46px;}

Answer 4

La meilleure chose à faire serait simple mise en œuvre de css.

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

Hope it helps :)