我创建了一个下拉菜单。我需要当我将鼠标悬停在一个选项卡上时,菜单中其他选项卡的不透明度会发生变化,除了我悬停的当前选项卡。
示例:当我将鼠标悬停在"主页"选项卡时,"主页"选项卡和列表项的状态没有改变(黄色,不透明度= 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;
}
但是请在您的问题中包含相关代码,以便对其他人也有帮助。