我正在尝试将悬停功能添加到复选框元素,但正如您在本演示中看到的那样,它无效.能告诉我为什么会这样吗?
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; }
Michael.. 6
您的代码正在替换实际的复选框,并将您自己的图形表示添加到标签的开头.复选框本身实际上是从视图中隐藏的,因此您的悬停状态不起作用.您的悬停需要在标签上.
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值以显示正确的精灵,你需要做同样的事情.
您的代码正在替换实际的复选框,并将您自己的图形表示添加到标签的开头.复选框本身实际上是从视图中隐藏的,因此您的悬停状态不起作用.您的悬停需要在标签上.
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值以显示正确的精灵,你需要做同样的事情.