0

我的标题区域有一个 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;
    }
4

1 回答 1

0

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

您只需要在新选择器中指定从默认状态发生的变化，即背景位置。您还需要为主体创建规则以更改其颜色。

于 2013-02-08T08:46:16.663 回答