0

DIVにロードする画像があります：

.playerSkipForward
{
    background-image: url("../images/player/forward.png");
    background-repeat: no-repeat;
    cursor: pointer;
}

ホバー画像セット付き

.playerSkipForward:hover
{
    background-image: url("../images/player/forward-hover.png");
}

次に、ある時点で、画像を変更して「非アクティブ」に見えるようにするクラスを追加します

$(track).parents().find('.playerSkipForward').addClass('playerSkipForward_inactive')

新しい（非アクティブな）クラスは私のCSSで次のように宣言されています

.playerSkipForward_inactive
{
    background-image: url("../images/player/forward_inactive.png");
    background-repeat: no-repeat;
    cursor: default;
}

上記のクラスの画像に正しく変更されます。ただし、それでもホバリングして色が変わります。.on('hover')バインディングは管理が難しい場合があるため、のようなアンバインディングを追加したくありません。追加されたcssクラスだけでホバーをオーバーライドする方法はありますか？

4

3 に答える 3

1

あなたのコメントを見ると、これはCSSの特異性の問題だと思います。

現在のCSSクラスの代わりに次のCSSクラスを使用してみてください.playerSkipForward_inactive。

.playerSkipForward.playerSkipForward_inactive,
.playerSkipForward.playerSkipForward_inactive:hover
{
    background-image: url("../images/player/forward_inactive.png");
    cursor: default;
}

background-repeatプロパティも削除したことに注意してください。.playerSkipForwardルールでこれに同じ値をすでに設定しています。

于 2013-03-25T17:24:08.087 に答える
0 
.playerSkipForward_inactive, .playerSkipForward_inactive:hover
{
    background-image: url("../images/player/forward_inactive.png");
    background-repeat: no-repeat;
    cursor: default;
}

一度に2つのクラスを使用している場合は、次のより具体的なセレクターを試してください。

.playerSkipForward.playerSkipForward_inactive, 
.playerSkipForward.playerSkipForward_inactive:hover
    { 
    ...
    }

または、より一般的で単純なもの：

.playerSkipForward.inactive, 
.playerSkipForward.inactive:hover
    { 
    ...
    }
于 2013-03-25T16:56:42.090 に答える
0

次のコードでうまくいくはずです。importantキーワードを使用して、非アクティブ状態のホバー機能をオーバーライドするだけです。

.playerSkipForward_inactive:hover
{
    background-image: url("../images/player/forward_inactive.png") !important;
    background-repeat: no-repeat !important;
    cursor: default !important;
}
于 2013-03-25T16:58:32.210 に答える