Question

我有一个超级菜单，显示div中包含的子菜单以及简短的文字和图像。并非所有父菜单都有子菜单，如示例所示。

在悬停时，我想仅为那些具有子菜单的父菜单项更改background-color。

因此，在我的示例中，只有 父母一个，父母二，父母三个 和 父四个 会有背景其他颜色为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;
    }

完整的小提琴示例here

我已经尝试过几个与stackoverflow上的qustion类似的答案，但它们似乎没有用。

我想使用纯css解决方案而不是jQuery，因为它可以使用jQuery，但我想避免使用jQuery。

Answer 1

以下是如何使用子菜单定位父菜单：

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

DEMO

Answer 2

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

使用引导程序

检查以上代码

仅当父菜单包含在div容器

2 个答案: