单击父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/

演示

相关问题