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

Change opacity of other tab when I hover current tab

本文关键字：选项 其他 不透明度 悬停      更新时间：2023-09-26

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

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

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

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

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

JSFiddle Demo

你可以做这样的事情。

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

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

相关文章：