CSS3輸入複選框懸停不工作

我想添加懸停功能的複選框元素，但正如你可以在This Demo看到它不工作。你能讓我知道爲什麼會發生這種情況嗎？CSS3輸入複選框懸停不工作

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; 
}

來源

2014-06-25 user3649067

您的代碼將替換實際的複選框，並將您自己的圖形表示添加到標籤的開頭。該複選框本身實際上是隱藏的，因此您的懸停狀態不起作用。您的懸停需要放在標籤上。

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小提琴，我也改變了對背景像素值以顯示正確的精靈，你需要做同樣的事情。

來源

2014-06-25 20:36:23 Michael

使用此

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; 
}

來源

2014-09-02 12:04:37

CSS3輸入複選框懸停不工作

回答

相關問題