CSS3输入复选框悬停不起作用

Question

我正在尝试将悬停功能添加到复选框元素,但正如您在本演示中看到的那样,它无效.能告诉我为什么会这样吗？

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -19px top no-repeat;
}
input[type="checkbox"]:hover  {
    background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -15px top no-repeat;
}

Answer 1

您的代码正在替换实际的复选框,并将您自己的图形表示添加到标签的开头.复选框本身实际上是从视图中隐藏的,因此您的悬停状态不起作用.您的悬停需要在标签上.

JSFiddle演示

更改此选择器:

input[type="checkbox"]:hover  {
    background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -15px top no-repeat;
}

对此:

input[type="checkbox"] + label span:hover  {
    background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -15px top no-repeat;
}

请注意,在我的JS小提琴中,我还改变了背景上的px值以显示正确的精灵,你需要做同样的事情.