Question

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

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 Demo

更改此选择器：

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值以显示正确的精灵，你需要做同样的事情。

Answer 2

使用此

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

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

2 个答案: