更改基於子項

父項的背景顏色我想改變navbar-header類的背景顏色，當錨元素的具有active類。更改基於子項

菜單中打開

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

這可能與只是作爲我不想使用jQuery這個CSS。

來源

2016-04-26 Learning

你問[有一個CSS選擇器父？]（http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector） –

我用同樣的例如但是它力的工作 – Learning

好耶，作爲回答指出：「截至2015年，這是不是可以在任何瀏覽器。」 –

您可以使用的absolute/relative行爲CSS屬性，如果您的最終代碼不與它進行交互：

的想法是靜態的地位打下一個孩子絕對positionned僞元素的父這是在相對位置作爲參考。

然後僞元素用於繪製背景懸停初始背景被隱藏。

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

來源

2016-04-26 13:11:23

更改基於子項

回答

相關問題