javascript - 現在のタブをホバーしたときに他のタブの不透明度を変更する

Question

ドロップダウンメニューを作成します。タブにカーソルを合わせると、現在のタブ以外のメニューの他のタブの不透明度が変更されます。

例: [ホーム] タブにカーソルを合わせると、[ホーム] タブとリスト項目の状態は変更されません (黄色、不透明度 = 1) が、他のタブ (チュートリアル、記事、インスピレーション) は変更されます (灰色、不透明度 = 0.5)。

<code>http://jsfiddle.net/dennisho/6fX42/2/</code>

Answer 1

他のメニュー要素を選択するのに役立つすべての兄弟を選択する兄弟セレクターはありませんが、:notセレクターを使用できます

nav > ul:hover li:not(:hover) {
   opacity:0.5;
}

JSFiddleデモ

Answer 2

このようなことができます。

nav ul li {
    background-color: yellow;   
}

nav ul li:first-of-type { 
    border-top-left-radius:25px;
    border-bottom-left-radius:25px;
}

nav ul li:last-of-type { 
    border-top-right-radius:25px;
    border-bottom-right-radius:25px;
}

nav > ul li:hover{
    opacity:1;
}
nav > ul li:not(:hover){
    opacity:0.5;
}

ただし、他の人にも役立つように、質問に関連するコードを含めてください。