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

【问题标题】：Change opacity of other tab when I hover current tab当我悬停当前选项卡时更改其他选项卡的不透明度
【发布时间】：2023-03-19 14:53:01
【问题描述】：

我创建了一个下拉菜单。我需要当我将鼠标悬停在一个选项卡上时，菜单中其他选项卡的不透明度会发生变化，除了我悬停的当前选项卡。

示例：当我将鼠标悬停在主页选项卡上时，主页选项卡和列表项的状态没有改变（黄色，不透明度 = 1），但其他选项卡（教程、文章、灵感）发生了变化（灰色，不透明度 = 0.5）

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

【问题讨论】：

请在此处包含相关代码。

标签： javascript jquery html css tabs

【解决方案1】：

没有同级选择器可以选择所有同级来帮助选择其他菜单元素，但您可以使用:not 选择器

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

JSFiddle Demo

【讨论】：

【解决方案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;
}

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

【讨论】：

我看到了您的示例，但我想要不透明度，当前选项卡及其列表项的颜色都不会改变。这意味着当前的颜色是黄色的，并且悬停时列表项的不透明度不会改变。
没问题。我更新了上面的答案以反映这一点。这是direct link to the jsFiddle