导航菜单打开时使内容不透明

Question

当我打开导航栏时，我想在内容上显示一个半透明蒙版。

这是我的代码：

<nav class="navbar navbar-default">
  <div class="collapse navbar-collapse"">
    <ul class="nav navbar-nav">
        <li><a href="/Home">Home</a></li>
        <li class="dropdown">
            <a href="/about" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About</a>
            <ul class="dropdown-menu">
                <li><a href="/about/what">What</a></li>
                <li><a href="/about/how">How</a></li>
            </ul>
         </li>
      </ul>
  </div>
 </nav>

 <div class= "content">
    <div class = "container">
      <div class = "row">
        <div class="col-sm-10">
            Enter Text Here
        </div>
    </div>
</div>

有没有办法只使用 css 来做到这一点？

Answer 1

如果类被添加到活动导航项，类似兄弟选择器的东西？

nav.active + .content {
display: block;
width: 100%;
height: 100%;
content: " ";
position: absolute;
background: rgba(0,0,0,0.6);
left: 0;
top: 0;
z-index: 999;

}