悬停时复选框的CSS

Question

我想在悬停时更改每个复选框的颜色。我有四个复选框。我想更改颜色，如果我将鼠标悬停在“全部”复选框上，它会显示红色、蓝色表示“冷”、橙色表示“暖”和绿色对于“活跃”。

#ck-button {
  margin: 0px;
  background-color: #EFEFEF;
  border-radius: 4px;
  border: 1px solid #D0D0D0;
  overflow: auto;
  float: left;
}
#ck-button label {
  float: left;
  width: 4.0em;
}
#ck-button label span {
  text-align: center;
  padding: 3px 0px;
  display: block;
  border-radius: 4px;
}
#ck-button label input {
  position: absolute;
  top: -20px;
}
input:checked +span {
  background-color: #911;
  color: #fff;
}
#ck-button input:hover #all + span {
  background-color: #efE0E0;
}
#ck-button input:hover #o1 + span {
  background-color: blue;
}
#ck-button input:hover #o2 + span {
  background-color: orange;
}
#ck-button input:hover #o3 + span {
  background-color: green;
}

<div id="ck-button">
  <label>
    <input type="radio" name="sta_choice" id=all value="All" checked><span>All</span>
  </label>
</div>
<div id="ck-button">
  <label>
    <input type="radio" name="sta_choice" id="o1" value="Cold" onclick=handleClick1(this.val);><span class="o1">Cold</span>
  </label>
</div>
<div id="ck-button">
  <label>
    <input type="radio" name="sta_choice" id="o2" value="Warm" onclick="handleClick1(this.val);"><span>Warm</span>
  </label>
</div>
<div id="ck-button">
  <label>
    <input type="radio" name="sta_choice" id="o3" value="Active" onclick="handleClick1(this.val);"><span>Active</span>
  </label>
</div>

Answer 1

在最后四行中使用label:hover 代替input:hover。输入位于顶部且未悬停(在标签外)。

#ck-button label:hover #all + span {
    background-color:#efE0E0;
}
#ck-button label:hover #o1 + span {
    background-color:blue;
}
#ck-button label:hover #o2 + span {
    background-color:orange;
}
#ck-button label:hover #o3 + span {
    background-color:green;
}

http://jsfiddle.net/3q4uuvum/3/