CSS парения работать только на светлячок

Question

CSS парения работать только на светлячок, не работают на хроме и то, что это мой код

HTML

<li><input type="checkbox" class="p4" name="i305" id="check305" /><label for="check305"><span></span></label></li> 
<li><input type="checkbox" class="p4" name="i306" id="check306" /><label for="check306"><span></span></label></li>   
<li><input type="checkbox" class="p4" name="i307" id="check307" /><label for="check307"><span></span></label></li> 

CSS

input.p4[type="checkbox"] { 
    display:none; 
} 
input.p4[type="checkbox"] + label span { 
    display:inline-block; 
    width:20px; 
    height:19px; 
    margin:-6px 0 0 0; 
    vertical-align:middle; 
    background:url(../images/check1.png) 1px top no-repeat; 
    cursor:pointer; 
} 
input.p4[type="checkbox"]:hover + label span { 
    background:url(../images/check1.png) -21px top no-repeat; 
} 
input.p4[type="checkbox"]:checked + label span { 
    background:url(../images/check1.png) -43px top no-repeat; 
} 

Может ли кто-нибудь помочь мне сделать функцию hover css?

Answer 1

:hover следует наносить на этикетке, а не флажок (, так что не видно, поэтому он не может быть колебались ..)

input.p4[type="checkbox"] + label:hover span { 
    background:url(../images/check1.png) -21px top no-repeat; 
} 

Рабочий пример на http://jsfiddle.net/gaby/rkbeK/

---

(см. Why is hover for input triggered on corresponding label in CSS? для получения дополнительной информации)