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/

Answer 2

即使作为选项

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

ul{
    text-align: center;
    width: 300px;
    margin: 25px auto;    
}
ul > li{
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: top;
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    position: relative;
}
input{
    display: none;
}
label{
    display: block;
    width: 100px;
    height: 100px;
}
label:hover{
    background: #f7f7f7;
}
input:checked ~ label{    
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: url(http://html5doctor.com/wp-content/themes/html5doctor2/images/HTML5_Badge_64.png) no-repeat center center;
    border: 1px solid #000;
}

<ul>
    <li>
        <input type="checkbox" id="c1" name="checkbox" />  
        <label for="c1"></label>
    <li>
        <input type="checkbox" id="c2" name="checkbox" />  
        <label for="c2"></label>
    <li>
        <input type="checkbox" id="c3" name="checkbox" />  
        <label for="c3"></label>
    <li>
        <input type="checkbox" id="c4" name="checkbox" checked />  
        <label for="c4"></label>
    <li>
        <input type="checkbox" id="c5" name="checkbox" />  
        <label for="c5"></label>
    <li>
        <input type="checkbox" id="c6" name="checkbox" />  
        <label for="c6"></label>
    <li>
        <input type="checkbox" id="c7" name="checkbox" />  
        <label for="c7"></label>
    <li>
        <input type="checkbox" id="c8" name="checkbox" />  
        <label for="c8"></label>
    <li>    
        <input type="checkbox" id="c9" name="checkbox" />  
        <label for="c9"></label>
</ul>

Answer 3

根据复选框是否选中，我无法在线找到如何显示不同的颜色，但是经过不懈地调整代码后，我发现了。

.ck-button-class:hover input:checked + span {
  background-color: green;
}

这是假设您将类别分配给了这些按钮<div id="ck-button" class="ck-button-class">。

悬停时复选框的CSS

3 个答案: