html - ホバー時の ul-li のミス動作を停止

Question

白いテキストと青い背景を持つナビゲーション メニューがあり、白いテキストと黒い背景のように、青いテキストと黒い背景をホバーしますselected。
しかし、カーソルを合わせると、発生したくないselected menu item青いテキスト (のプロパティ) が表示されます。:hoverどうにかして止めることはできますか？

フィドル： リンク

Answer 1

.selected:hoverケースも付けるだけ

main_menu li .selected,
main_menu li .selected:hover{

http://jsfiddle.net/WTeYW/3/のデモ

---

さらに、ルール.selectedと:hoverルールは色を除いて同一であるため、それらをマージして、違いのためだけに新しいルールを作成する必要があります (保守性が向上します) 。

.main_menu li a:hover,
.main_menu li a.selected{
    box-shadow:0 20px 30px -10px rgba(255,255,255,0.4);
    border-color:#888; 
    background:#000; 
}

.main_menu li a:hover{color:#6cf;}
.main_menu li a.selected,
.main_menu li a.selected:hover{color:#ffffff;}

これを含むデモhttp://jsfiddle.net/WTeYW/5/

---

（注意：元の回答を読んだ場合、それは少し間違っていました。これa.selectedはより具体的ではなく、同様に具体的ですが、CSSファイルの最後にあったため優先されました。上記の修正はそれを行う方法です。）

Answer 2

これにはcss:not()セレクターを使用できます：

.main_menu li a:hover:not(.selected){
    box-shadow:0 20px 30px -10px rgba(255,255,255,0.4);
    border-color:#888; 
    background:#000; 
    color:#6cf;
    }

これを試して

参照 1

Answer 3

CSS :not(.selected) を使用して、:hover が実行されないようにしました。

.main_menu li a:not(.selected):hover{

ここ: http://jsfiddle.net/CfeCB/

これがあなたの言いたいことですよね？