以以前的同级CSS为目标
提问于 2020-02-21 23:19:19
我可以使用~运算符指向“下一个”同级，但前一个同级不是目标。
在下面的小提琴中，如果您悬停菜单项1、2和3，则红色字体将被删除。但是，如果您随后将鼠标悬停在菜单项4和5上，则可以看到红色字体。有没有可能用CSS隐藏红色字体，而不管哪一个菜单项被悬停？我认为兄弟~选择器可以解决这个问题，但它似乎只针对下一个兄弟。
HTML：
<ul>
<li class="sub-menu">Active Menu 1</li>
<li class="sub-menu">Active Menu 2</li>
<li class="sub-menu active-menu">Active Menu 3</li>
<li class="sub-menu">Active Menu 4</li>
<li class="sub-menu">Active Menu 5</li>
</ul>CSS：
.sub-menu {
color: #000;
}
.active-menu {
color: red;
}
.hover {
color: pink;
}
.hover ~ .sub-menu {
color: #000;
}
回答 1
Stack Overflow用户
发布于 2020-02-22 00:22:21
您不能使用CSS来针对以前的同级，但是您需要将您的逻辑修改为如下所示
(将容器的:hover上的所有项都设置为黑色)
.menu-container:hover .sub-menu {
color: black;
}
.menu-container .sub-menu {
color: #000;
}
.menu-container .active-menu {
color: red;
}
.menu-container .sub-menu:hover {
color: pink;
}<div class="menu-container">
<div class="sub-menu">Active Menu 1</div>
<div class="sub-menu">Active Menu 2</div>
<div class="sub-menu active-menu">Active Menu 3</div>
<div class="sub-menu">Active Menu 4</div>
<div class="sub-menu">Active Menu 5</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60347438
复制相关文章
腾讯云开发者
