單擊父div |時更改兒童的顏色div CSS僞

我_sideButton與默認顏色white

._sideButton{background-color:white;height:100%;left:0;position:absolute;top:0;width:5px} 

._sideButton:active{background-color:red;height:100%;left:0;position:absolute;top:0;width:5px}

如何當我們選擇按鈕2，在_sideButton變成紅色，並始終變爲紅色。
選擇按鈕1時，按鈕1 _sideButton變爲紅色，則BUTTON2 _sideButton變爲默認（白色）。

*這裏 === JSFiddle ===

THX前 -/-

/*** Here guys ***/ 
 
._sideButton{background-color:white;height:100%;left:0;position:absolute;top:0;width:5px} 
 

 
._sideButton:active{background-color:red;height:100%;left:0;position:absolute;top:0;width:5px} 
 

 

 

 
._tabFolder{background-color:rgba(29, 33, 41, 1); cursor:pointer;position:relative;} 
 
._tabFolder:hover{background-color:rgba(255,255,255,0.1)} 
 
._tabFolder:active{background-color:rgba(29, 33, 41, 1)} 
 

 
._itemPosition{align-items:center;display:flex} 
 

 
._5bme ._sideFolder{background-color:#066cd2} 
 
._iconText:hover ._1i5y,.uiPopover.selected ._1i5y{display:block} 
 
._iconText{align-items:center;display:flex;justify-content:space-between;width:100%;margin-left:13px;}

<body style="background:grey;"> 
 
    <div class="_tabFolder _itemPosition" role="presentation" style="height: 40px; user-select: none;"> 
 
      <div class="_sideButton"></div> 
 
      <div class="_iconText" style="width: 215px"> 
 
      <span style="color:white;">BUTTON 1</span> 
 
      </div> 
 
      </div> 
 

 

 
<div class="_tabFolder _itemPosition" role="presentation" style="height: 40px; user-select: none;"> 
 
      <div class="_sideButton"></div> 
 
      <div class="_iconText" style="width: 215px"> 
 
      <span style="color:white;">BUTTON 2</span> 
 
      </div> 
 
      </div> 
 
</body>

來源

2017-11-11 Ananda

你不能用純CSS做到這一點。使用javascript – scroobius

@scroobius你的意思是不可能把這個按鈕變成紅色並且只用CSS保持這種狀態？那麼這是怎麼發生的：https：//jsfiddle.net/zer00ne/764k6qo0/ – zer00ne

對於CSS，你可以隱藏<input type='checkbox'或'radio'>和使用<label for='無線電/複選號碼'></label>。標籤將作爲按鈕，而chx/rad將放置在標籤之前，並將標籤的「狀態」保持不變（例如，變爲紅色並無限期地保持紅色）。狀態將由rad /確定。 chx是:checked。

例

.radio:checked + .label { color:red }

甲.radio按鈕：檢查和後右它+是.label文本變爲紅色。 +是adjacent sibling combinator，你也可以這樣做：~general sibling combinator。您可以使用:target selector。以<a> nchor標記分配其href屬性值的元素的#id。然後分配元素:target選擇器。與rad/chx &標籤組合類似，它允許我們使用CSS動態更改元素樣式並保持其持久性。雖然演示顯示了一個「較舊」的兄弟姐妹（即單選按鈕）和「較年輕：兄弟姐妹（即標籤）」關係，但該演示也可以輕鬆地在父母子女關係中工作（提示：刪除+）。請注意，不需要在<a>和element:target之間建立必要的關係（除了它們必須位於同一文檔上）。

參考

Checkbox/Radio Button & Label Hack

:target selector。

修改OP：https://jsfiddle.net/zer00ne/764k6qo0/

演示

/* Radio Buttons & Labels */ 
 

 

 
/* :checked & for='ID OF RADIO' */ 
 

 
.rad { 
 
    display: none 
 
} 
 

 
.lab { 
 
    border-radius: 9px; 
 
    border: 2px inset grey; 
 
    padding: 3px 5px; 
 
    font-size: 24px; 
 
    cursor: pointer; 
 
    margin: 20px 10px; 
 
} 
 

 
.lab::before { 
 
    content: 'WHITE'; 
 
} 
 

 
.rad:checked+.lab { 
 
    background: red; 
 
    color: white; 
 
} 
 

 
.rad:checked+.lab::before { 
 
    content: '\a0\a0RED\a0\a0'; 
 
} 
 

 

 
/* Anchor & Any Element */ 
 

 

 
/* href='#ID OF ELEMENT' & #ANY:target */ 
 

 
a { 
 
    display: inline-block; 
 
    margin: 0 5px; 
 
    color: yellow; 
 
    background: #000; 
 
    padding: 2px 4px; 
 
} 
 

 
a:first-of-type { 
 
    color: #ff4c4c 
 
} 
 

 
a:nth-of-type { 
 
    color: yellow 
 
} 
 

 
a:last-of-type { 
 
    color: lime 
 
} 
 

 
b { 
 
    display: block; 
 
    height: 48px; 
 
    width: 48px; 
 
    border-radius: 50%; 
 
    margin: 5px auto; 
 
    border: 3px outset grey; 
 
    background: rgba(0, 0, 0, .2) 
 
} 
 

 
#T1:target { 
 
    background: red; 
 
} 
 

 
#T2:target { 
 
    background: yellow 
 
} 
 

 
#T3:target { 
 
    background: green 
 
}

<input id='R1' class='rad' name='rad' type='radio'> 
 
<label id='L1' class='lab' for='R1'></label> 
 

 
<input id='R2' class='rad' name='rad' type='radio'> 
 
<label id='L2' class='lab' for='R2'></label> 
 

 
<input id='R3' class='rad' name='rad' type='radio'> 
 
<label id='L3' class='lab' for='R3'></label> 
 

 
<hr> 
 

 
<a href='#T1' target='_self'>STOP</a> 
 
<a href='#T2' target='_self'>SLOW</a> 
 
<a href='#T3' target='_self'>GO</a> 
 

 

 
<b id='T1'>&nbsp;</b> 
 
<b id='T2'>&nbsp;</b> 
 
<b id='T3'>&nbsp;</b>

來源

2017-11-11 03:41:30 zer00ne

單擊父div |時更改兒童的顏色div CSS僞

回答

例

參考

修改OP：https://jsfiddle.net/zer00ne/764k6qo0/

演示

相關問題