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

但请在您的问题中包含相关代码，以便对其他人也有帮助。