动态jQuery CSS具有三状态滚动背景位置根据状态变化

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

本文关键字：状态 位置 背景 变化 滚动 动态 CSS jQuery      更新时间：2023-09-26

我的页眉区域有一个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修改网站白色布尔时，它会将页面背景更改为白色，我希望我的按钮的默认状态在我的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;
    }

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

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

相关文章：