Dynamic jQuery CSS avec 3-state rollover backgroundPosition changement en fonction de l'état

Question

J'ai un href sur ma zone d'en-tête, lorsque l'utilisateur clique sur cet en-tête Je veux changer le fond de mes pages en blanc du noir, et changer les couleurs de mon boutons de navigation au noir du blanc. Tous mes boutons ont leur arrière-plan appliqué à partir d'une feuille de style PNG à 3 états, et im en utilisant CSS position arrière-plan pour les afficher avec un effet de survol en changeant la position d'arrière-plan.

Je peux le faire avec jquery en utilisant une fonction de clic comme:

$('#HomeButton').click(function() {  
    if (!siteWhite) { 
     $('body').css('backgroundColor', 'white'); 
     $('a.pageTitleButton').css({ 'backgroundPosition': '543px 0' }); 
     $('a.pageTitleButton:hover').css({ 'backgroundPosition': '-545px 0' }); 
    } 
    else { 
     $('body').css('backgroundColor', 'black'); 
     $('a.pageTitleButton').css({ 'backgroundPosition': '0px 0' }); 
     $('a.pageTitleButton:hover').css({ 'backgroundPosition': '-145px 0' }); 
    } 

    // Reset site style white bool 
    siteWhite = !siteWhite; 
}); 

Cependant, mes boutons sont une feuille de sprite avec 3 états, un texte noir, texte blanc et rouge. Lorsque je passe la souris dans le style normal avant qu'il ne change avec jquery, mon texte est blanc, le vol stationnaire est rouge. Ce que je veux faire est quand j'ai cliqué sur l'en-tête et changé le booléen siteWhite avec jquery, qui changera alors l'arrière-plan de page en blanc, je veux l'état par défaut de mes boutons pour être dans la position de noir de mon spritesheet, hover dans la position rouge. Lorsque j'utilise le code ci-dessus, mon hover s'arrête de fonctionner après que la position d'arrière-plan a été modifiée et que l'arrière-plan soit devenu blanc.

Y a-t-il une meilleure façon d'y remédier? Toutes les solutions ou conseils pour ce que j'essaie de faire seraient grandement appréciés. Je ne veux pas avoir à charger dans une feuille de style entièrement nouvelle pour changer ces éléments après que l'utilisateur change de siteBlack en siteWhite.

Voici mon CSS/HTML:

<a href="#Home" id="HomeButton" class="pageTitleButton"></a> 

a.pageTitleButton { 
    display: block; 
    width: 546px; 
    height: 56px; 
    text-decoration: none; 
    background: url('../Images/Rollovers/king_harobed.png'); 
    margin: 0px 1.5px 0px 0px; 
    float: left; 
} 
a.pageTitleButton:hover { 
    background-position: -545px 0; 
    } 

Answer 1

Il est préférable de gérer tous les styles de la CSS, et laisser dans le jquery seul le changement d'état:

$('#HomeButton').click(function() {  
    if (!siteWhite) { 
     $('body').addClass ('white'); 
    } 
    else { 
     $('body').removeClass ('white'); 
    } 

    // Reset site style white bool 
    siteWhite = !siteWhite; 
}); 

et vous obtient css:

a.pageTitleButton { 
    display: block; 
    width: 546px; 
    height: 56px; 
    text-decoration: none; 
    background: url('../Images/Rollovers/king_harobed.png'); 
    margin: 0px 1.5px 0px 0px; 
    float: left; 
    background-position: 0px 0; 
} 
a.pageTitleButton:hover { 
    background-position: -145px 0; 
} 

body.white a.pageTitleButton { 
    background-position: 543px 0; 
} 
body.white a.pageTitleButton:hover { 
    background-position: -545px 0; 
} 

vous ne devez spécifier dans les nouveaux sélecteurs les changements de l'état par défaut, qui est la position de fond. Vous devez également créer une règle pour que le corps change de couleur.