1

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的功能吗？

4

1 回答 1

2

:hover应该应用于标签，而不是复选框（因为它不可见，所以不能悬停..）

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

http://jsfiddle.net/gaby/rkbeK/上的工作示例

（有关更多信息，请参阅为什么在 CSS 中的相应标签上触发输入悬停？）

于 2013-04-27T11:59:54.323 回答