3 bouton de l'état normal, de roulement (sur le vol stationnaire), active (clic) avec jquery?

J'utilise le code suivant pour obtenir mes boutons pour le changement de leur survol de l'état lorsque les survole.

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

avec le .bouton de classe appliqué à tous les boutons de l'vrd, en utilisant le fond de la position de la fonction où toutes les images d'arrière-plan ont tous les trois états de la même image '0 0px" afficher l'état normal, à '0 -23px" montre le roulement de l'état, et à '0 -46px" montre l'état actif.

Je suis à essayer de comprendre comment obtenir mes boutons de montrer leur actif des états lorsqu'ils sont cliqués, tout en ayant toutes les autres .bouton boutons de revenir à leurs états normaux. J'ai essayé le code suivant qui change les boutons à leur actif des etats, mais lorsque la souris est déplacée du les boutons ils retournent à leurs états normaux.

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

Merci!

  • pouvez-vous faire un violon ?
  • Ainsi, lorsque vous cliquez dessus, vous voulez rester dans l'état "actif"?
  • pourquoi sont vous pouvez créer 3 classes en css (.hover, .le capotage .active) et il suffit de changer de classe en jquery.. l'utilisation .en live.. je peux vous montrer le code si vous dites comment ur boutons sont mis en œuvre...
  • J'ai fait du violon dans le cas où quelqu'un a un problème similaire, et veut voir comment j'ai mis en place ces solutions à mes boutons pour le travail que je voulais --> jsfiddle.net/PPbFJ/11
InformationsquelleAutor DillonB | 2013-04-08
  1. 2

    Vous pouvez ajouter une Classe pour cela, comme:

    Ajouter thi dans votre CSS

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

    Et dans Jquery l'utiliser comme 

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

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

    • Génial! Merci beaucoup! Résolu mes problèmes et c'est vraiment utile. J'adore ce site.
    • J'ai fait du violon dans le cas où quelqu'un a un problème similaire, et veut voir comment j'ai mis en place ces solutions à mes boutons pour le travail que je voulais --> jsfiddle.net/PPbFJ/11
    InformationsquelleAutor Rohan Kumar
  2. 12

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

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

    Espère que cela aide 🙂

    • Les trois boutons de classes j'ai mis en place avec Rohan Kumar réponse et il a très bien fonctionné.
    • - Je configurer les boutons de cette façon, mais a couru un hic, cliquez sur ajouter des événements dans Safari: stackoverflow.com/questions/48106286/...
    InformationsquelleAutor Avishek
  3. 2

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

    InformationsquelleAutor web2008
  4. 0

    Maintenant, si vous avez utilisé pour fonction de rappel en jquery que ce formiate ..

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

    Plus sur De Retour D'Appel De La Fonction

    InformationsquelleAutor Rohit Azad