CODEWITHSUNDEEP
htmlcsshovercss-selectors
carl
carl

Reputation: 13

css hover only work on firefox

css hover only work on firefox, dont work on chrome and ie, this is my code

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;
}

Can anybody please help me to make function the hover css?

Upvotes: 1

Views: 543

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

The :hover should be applied to the label, not the checkbox (since that is not visible so it cannot be hovered..)

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

Working example at http://jsfiddle.net/gaby/rkbeK/

(see Why is hover for input triggered on corresponding label in CSS? for more info)

Upvotes: 2

Related Questions