Question

我的标题区域有一个href，当用户点击此标题时，我想将我的页面背景从黑色更改为白色，并将导航按钮的颜色从白色更改为黑色。我的所有按钮的背景都是从三态样式表PNG中应用的，我使用背景位置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;
}

您只需要在新选择器中指定默认状态的更改，那是背景位置。您还需要为正文创建一个更改其颜色的规则。

动态jQuery CSS具有3状态翻转backgroundPosition根据状态更改

1 个答案: