1

CSSホバーは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 に答える