Question

css hover只适用于firefox，不用于chrome，即这是我的代码

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

任何人都可以帮助我使悬停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?）

css悬停只适用于firefox

1 个答案: