当我悬停当前选项卡时更改其他选项卡的不透明度

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 Demo

Answer 2

您可以执行this之类的操作。

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;
}

但请在您的问题中加入相关代码，这样对其他人也有帮助。