0

ヘッダー領域にhrefがあります。ユーザーがこのヘッダーをクリックすると、ページの背景が黒から白に変更され、ナビゲーションボタンの色が白から黒に変更されます。私のすべてのボタンには、スリーステートスタイルシートPNG​​から背景が適用されており、background-position CSSを使用して、background-positionを変更することでホバー効果でボタンを表示しています。

次のようなクリック関数を使用して、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ブール値を変更したときです。これにより、ページの背景が白に変わります。ボタンのデフォルトの状態を、スプライトシートのテキストの黒の位置にします。ホバーします。赤い位置にあります。上記のコードを使用すると、background-positionが変更され、背景が白に変更された後、ホバーが機能しなくなります。

これに取り組むためのより良い方法はありますか？私がやろうとしていることの解決策やヒントをいただければ幸いです。ユーザーが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

It is much better to handle all the styles from the CSS, and leave in the jquery only the state change:

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

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

and you css gets:

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

you only need to specify in the new selectors what changes from the default state, that is the background position. You would also need to create a rule for the body to change its color.

于 2013-02-08T08:46:16.663 に答える