CSS实现单选按钮选中与悬停状态同色的方法咨询

首先可以肯定地说，你完全不需要借助JavaScript来切换.active类，纯CSS就能搞定单选按钮:checked和:hover状态颜色一致的需求。

你的代码思路其实是对的，但要确保HTML结构是标准的按钮组写法——也就是用<label>关联<input type="radio">（要么将input嵌套在label内部，要么用label的for属性对应input的id），这样:checked伪类才能正确关联到对应的label元素上。

完整可运行示例 #

HTML结构

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<div id="shopping-bag" data-toggle="buttons" class="btn-group">
  <label class="btn btn-default">
    <input type="radio" name="option" autocomplete="off">
    <i class="fa fa-shopping-bag"></i> 购物袋选项
  </label>
</div>

<div id="rocket" data-toggle="buttons" class="btn-group">
  <label class="btn btn-default">
    <input type="radio" name="option" autocomplete="off">
    <i class="fa fa-rocket"></i> 火箭选项
  </label>
</div>

CSS样式

/* 购物袋按钮组：hover与checked状态统一颜色 */
#shopping-bag[data-toggle="buttons"] label:hover,
#shopping-bag[data-toggle="buttons"] label:has(input:checked) {
  color: #3b5998;
}

/* 火箭按钮组：hover与checked状态统一颜色 */
#rocket[data-toggle="buttons"] label:hover,
#rocket[data-toggle="buttons"] label:has(input:checked) {
  color: #d34836;
}

关键细节说明 #

• 如果需要兼容较旧的浏览器（不支持:has()伪类），可以把input放在label外面，用兄弟选择器实现：

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

  对应的HTML结构调整为：

  <div id="shopping-bag" data-toggle="buttons" class="btn-group">
    <input type="radio" id="bag-option" name="option" autocomplete="off">
    <label class="btn btn-default" for="bag-option">
      <i class="fa fa-shopping-bag"></i> 购物袋选项
    </label>
  </div>
  

• 同一组的单选按钮要设置相同的name属性，保证互斥选择的功能正常，这是单选按钮的基础规则，和样式无关但必须遵守。

为什么不需要JavaScript？ #

CSS的:checked伪类就是专门用来匹配被选中的单选/复选框的，只要HTML结构关联正确，就能直接通过伪类选中对应的label元素，实现选中状态的样式变化，完全不需要JS介入切换类名。

内容的提问来源于stack exchange，提问作者Kyle Underhill