jquery - クリック後にcssホバー状態が非アクティブになる

Question

このフィドルでは、ボックスの1つをクリックすると、ホバー状態が非アクティブになり、再び表示されなくなります。

css を使用して背景が設定された 3 つのボックスがありますbackground-image。クリックイベントを添付するためにjQueryを使用しています。ホバー状態が機能しなくなる理由を特定するのを手伝ってもらえますか?

ありがとう。

Answer 1

jQuery が背景画像をinline変更すると、実際の HTML が変更されます。つまり、新しい背景画像は で設定されたものよりも具体的#one:hoverであるため、上書きすることはできません。

!important新しい背景画像ごとに追加:hoverして、上書きする特異性があることを確認する必要があります。

デモ

Answer 2

li のインライン スタイルは css :hover セレクター プロパティを上書きするためです。それを機能させるために使用!importantします：

li#one:hover{
    background-image: url(http://i1287.photobucket.com/albums/a628/botpro7/1_hover_zps6b4b99c1.png)!important;
}

Answer 3

あなたが得ていた問題は、jquery で css プロパティを使用してインラインで背景を設定していたためでした。私はあなたの問題を解決するデモを作成しました。

デモ

背景を挿入していたコードの一部を削除し、コードにクラスを追加しただけな.activeので、ユーザーが要素をクリックすると、そのクラスが要素に設定されました。楽しんでいただければ幸いです。