Question

我有两个单选按钮，我想在:hover时给出与:checked相同的颜色。这可以使用CSS完成，还是需要.active类来切换JS？

#shopping-bag[data-toggle="buttons"] label:hover,
#shopping-bag[data-toggle="buttons"] label:checked {
  color: #3b5998;
}

#rocket[data-toggle="buttons"] label:hover,
#rocket[data-toggle="buttons"] label:checked {
  color: #d34836;
}

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<div class="btn-opt btn" id="shopping-bag" data-toggle="buttons">
  <label class="radio shopbtn" for="shopbtn"><input id="shopbtn" name="toggler" type="radio"><i class="fa fa-fw fa-shopping-bag"></i>&nbsp;Deals</label>
</div>
<div class="btn-opt btn" id="rocket" data-toggle="buttons">
  <label class="radio rocketbtn" for="rocketbtn"><input id="rocketbtn" name="toggler" type="radio"><i class="fa fa-fw fa-rocket"></i>&nbsp;Buzz</label>
</div>

Answer 1

您的选择是使用Javascript选择输入的父级，或者只是将输入放在标签之前，并在检查输入时使用adjacent selector修改标签。

#shopping-bag[data-toggle="buttons"] label:hover,
#shopping-bag[data-toggle="buttons"] input:checked + label {
  color: #3b5998;
}

#rocket[data-toggle="buttons"] label:hover,
#rocket[data-toggle="buttons"] input:checked + label {
  color: #d34836;
}

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<div class="btn-opt btn" id="shopping-bag" data-toggle="buttons">
  <input id="shopbtn" name="toggler" type="radio"><label class="radio shopbtn" for="shopbtn"><i class="fa fa-fw fa-shopping-bag"></i>&nbsp;Deals</label>
</div>
<div class="btn-opt btn" id="rocket" data-toggle="buttons">
  <input id="rocketbtn" name="toggler" type="radio"><label class="radio rocketbtn" for="rocketbtn"><i class="fa fa-fw fa-rocket"></i>&nbsp;Buzz</label>
</div>

CSS收音机选择标签独特的颜色

1 个答案: