Question

当锚元素a具有类navbar-header时，我想更改active类的背景颜色。

MENU OPEN

<div class="navbar-header">
    <a class="navbar-toggle active" data-target=".navbar-collapse" data-toggle="collapse"  href="#" aria-expanded="true">
        <ul class="bar-icon-wrapper">
            <li class="bar-icon"></li>
            <li class="bar-icon"></li>
            <li class="bar-icon"></li>
        </ul>
    </a>
</div>

MENU折叠

<div class="navbar-header">
    <a class="navbar-toggle collapsed" data-target=".navbar-collapse" data-toggle="collapse"  href="#" aria-expanded="false">
        <ul class="bar-icon-wrapper">
            <li class="bar-icon"></li>
            <li class="bar-icon"></li>
            <li class="bar-icon"></li>
        </ul>
    </a>
</div>

我尝试了一些东西，它没有用。

喜欢

.navbar-header:has( a.active) { backbround-color:red;}

这只能用CSS，因为我不想为此使用jQuery。

Answer 1

如果您的最终代码未与其互动，您可以使用absolute / relative行为的CSS属性：

我们的想法是将一个绝对定位的伪元素从静态位置的子元素放置到相对位置的父元素作为参考。

然后使用伪元素绘制背景悬停隐藏的初始背景。

.navbar-header {
  background:red;
  position:relative;
}
.active ul{/* you want to see the menu :) */
  position:relative;
  z-index:1;
}
.active:before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:lime;
}

<div class="navbar-header">
    <a class="navbar-toggle collapsed" data-target=".navbar-collapse" data-toggle="collapse"  href="#" aria-expanded="false">
        <ul class="bar-icon-wrapper">
            <li class="bar-icon">non a.active child</li>
            <li class="bar-icon">non a.active child</li>
            <li class="bar-icon">non a.active child</li>
        </ul>
    </a>
</div>
<div class="navbar-header">
    <a class="navbar-toggle active" data-target=".navbar-collapse" data-toggle="collapse"  href="#" aria-expanded="true">
        <ul class="bar-icon-wrapper">
            <li class="bar-icon">a.active child</li>
            <li class="bar-icon">a.active child</li>
            <li class="bar-icon">a.active child</li>
        </ul>
    </a>
</div>

根据子项更改父项的背景颜色

1 个答案: