jquery - 選択済みホバー背景なし

Question

順序付けられていないリストを持つ div があります。

アイテムをクリックすると、選択したクラスが追加されます。

選択されたアイテムは常に

   <li class="selected">

私が使用するすべてのアイテムについて。

   li:hover
{
    background-color:#CECEC8;
}

これは機能します。

そして、私が使用する選択したアイテムについて

.selected
{
    background-color:#8B8BFF;   
}
.selected :hover
{
    background-color:#8B8BFF;
}

しかし、選択したアイテムをクリックし、マウスがまだその上にある場合 (その上にマウスを置いている場合)、色は変わりませんが、#8B8BFF from.selected :hover ではなく、li:hover の #CECEC8 のままです。

クリックしたときに li:hover を無効にして、class=selected のリスト項目の背景色が、ホバーしても常に #8B8BFF になるようにするにはどうすればよいですか。

問題は、クリックしてもすぐに表示されず、通常のホバーから色が変化しないことです。

例

score 1 · Accepted Answer

編集:解決策はあなたのフィドルの問題とは異なるため、質問のコード用とフィドル用の2つの解決策を提供します

問題のコード:

:hover宣言の間にスペースがあります。削除してください。また、それは特異性についてです。li:hoverのためより具体的です。.selected:hoverli

以下を使用して、同じレベルの特異性を維持します。

li:hover
{
    background-color:#CECEC8;
}

li.selected
{
    background-color:#8B8BFF;   
}

li.selected:hover
{
    background-color:#8B8BFF;
}

フィドルのコード:

これは、最初のホバーセレクターがクラスセレクターよりも具体的な一致であるためです (間のスペースも削除します:hover)。

これらを使用してください。その神はひどい 必要はありませんimportant:

#browsecat li.selectedcat
{
    background-color:#8B8BFF;   
}

score 0 · Accepted Answer

単に使用する必要があります：

#browsecat li:hover
{
    background-color:#CECEC8;
}
#browsecat li.selectedcat
{
    background-color:#8B8BFF;   
}

使用する必要はありません!important。

PS : CSS の特異性について学ぶ必要があります: http://www.w3.org/TR/CSS2/cascade.html#specificity

score 0 · Accepted Answer

ID常により高い特異性tanを持っているため、この動作があると思いますclass。あなたのフィドルで、すべてidをに変更するとclass、期待どおりに動作します。

Star Wars が好きなら、ここでcss の特異性に関する詳細情報を取得できます。

または、そうでない場合、これは深刻なものです。

4 に答える 4