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

你只需要在新的選擇器中指定什麼改變從默認狀態， 這是背景位置。你還需要爲身體創建一個規則來改變它的顏色。