动态jQuery的CSS与3状态翻转backgroundPosition根据状态变化

Question

我有一个href在我的标题区域，当用户点击这个标题我想改变我的网页背景为白色从黑色，并改变我的颜色导航按钮从白色变黑。我的所有按钮都有从3态样式表PNG中应用它们的背景，并且即时通过改变背景位置使用background-position CSS来显示悬浮效果。

我可以通过点击功能就像用jQuery做到这一点：

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

然而，我的按钮是一个精灵表3点的状态，一个黑色文字，白色文字，红色文字。当我使用jquery更改之前，我将鼠标悬停在正常样式中时，我的文本为白色，悬停为红色。我想要做的是，当我点击标题并用jquery更改siteWhite bool，然后将页面背景更改为白色时，我希望按钮的默认状态位于我的spritesheet的文本黑色位置，悬停在红色的位置。当我使用上面的代码时，我的悬停在后台位置改变并且背景变为白色后停止工作。

有没有更好的方法来解决这个问题？任何我试图做的解决方案或技巧将不胜感激。我不想在用户将表单siteBlack更改为siteWhite后，在全新的样式表中加载更改这些元素。

这里是我的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

这是更好的处理所有从CSS的样式，并在jQuery的只留下状态变化：

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

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

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

你只需要在新的选择器中指定什么改变从默认状态， 这是背景位置。你还需要为身体创建一个规则来改变它的颜色。