只有当父菜单的子菜单包装在div容器中时，才更改父菜单的背景色。
只有当父菜单的子菜单包装在div容器中时，才更改父菜单的背景色。
提问于 2015-12-07 04:49:24
我有一个超级菜单，显示子菜单包在div内，以及简短的文本和图像。并非所有父菜单都有子菜单，如本例所示。
在悬停时，我只想更改那些有子菜单的父菜单项的background-color。
因此，在我的示例中，只有父-1、父-二、父-三--和--父--四--将背景色作为background-color:#e5e5e5，而其他--我不需要背景色--因为它们没有子菜单项。
我试着用伪列来改变它，但是我无法正确地定位它，可能是我做错了什么。
我尝试过的一些CSS
.nav>li a:hover:has (>div)
{
background-color:red !important;
font-weight:bold !important;
}
.nav>li:has(>div)
{
background-color:red !important;
font-weight:bold !important;
}
.nav>li:has(> a.active){
background-color:red !important;
font-weight:bold !important;
}完整小提琴示例这里
我已经尝试过几个类似于我对堆叠溢出问题的回答，但它们似乎不起作用。
我希望使用纯css解决方案，而不是jQuery，因为使用jQuery是可能的，但我希望避免使用jQuery。
回答 2
Stack Overflow用户
发布于 2015-12-07 05:10:00
下面是如何将父菜单作为子菜单的目标：
.nav li:nth-child(2):hover > a { background-color: aqua; }
.nav li:nth-child(3):hover > a { background-color: aqua; }
.nav li:nth-child(4):hover > a { background-color: aqua; }
.nav li:nth-child(5):hover > a { background-color: aqua; }下面是如何针对子菜单的方法：
.nav li:nth-child(2):hover .dropdown { background-color: lightgreen; }
.nav li:nth-child(3):hover .dropdown { background-color: yellow; }
.nav li:nth-child(4):hover .dropdown { background-color: lightblue; }
.nav li:nth-child(5):hover .dropdown { background-color: lawngreen; }演示
Stack Overflow用户
发布于 2019-11-06 11:29:58
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">one</button>
<button type="button" class="btn btn-secondary">Two</button>
<button type="button" class="btn btn-secondary">Three</button>
</div>使用引导检查上面的代码
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34126652
复制相关文章
相似问题
腾讯云开发者
