css for checkbox while hover - css

Question

I wanna change color for each checkbox while hover.I have four checkbox.I wanna change the color, If I hover the 'all' checkbox it shows red,blue color for 'cold',orange for 'warm' and green for 'Active'.
#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

In the last four lines use label:hover instead of input:hover. Input is positioned to top and isn't hovered (is outside the label).
#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

even as an option
*{
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

I couldn't find online how to display different colors for hover depending if the box is checked, but after tirelessly tweaking the code I figured it out.
.ck-button-class:hover input:checked + span {
background-color: green;
}
This is assuming you assigned the class to these buttons, <div id="ck-button" class="ck-button-class">.