Dynamic jQuery CSS with 3-state rollover backgroundPosition change depending on state

Question

I have an a href on my header area, when the user clicks this header I want to change my pages background to white from black, and change the colors of my navigation buttons to black from white. All of my buttons have their background applied from a 3-state stylesheet PNG, and im using background-position CSS to display them with a hover effect by changing the background-position.

I can do this with jquery by using a click function like:

$('#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;
});

However, my buttons are a sprite sheet with 3 states, one black text, white text, and red text. When I hover in the normal style before it changes with jquery my text is white, hover is red. What I want to do is when ive clicked on the header and changed the siteWhite bool with jquery, which will then change the page background to white, I want the default state of my buttons to be in the text black position of my spritesheet, hover in the red position. When I use the above code, my hover stops working after the background-position is changed and the background is changed to white.

Is there a better way to tackle this? Any solutions or tips for what im trying to do would be greatly appreciated. I dont want to have to load in an entirely new stylesheet to change these elements after the user changes form siteBlack to siteWhite.

Here is my 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

It is much better to handle all the styles from the CSS, and leave in the jquery only the state change:

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

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

and you css gets:

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;
}

you only need to specify in the new selectors what changes from the default state, that is the background position. You would also need to create a rule for the body to change its color.