當導航菜單打開時，使內容不透明

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; 

}