懸停風格的自定義複選框與字體真棒

Question

我有一些簡單的HTML/CSS字體真棒字體來定製複選框。當複選框懸停時，我正努力修改顏色（現在爲紅色）。

由於我使用字體真棒字體來定製複選框，我認爲我需要將CSS應用於懸停的標籤上，但它沒有達到預期的效果。

input.faChkRnd:hover + label:before { 
    color: red; 
} 

這似乎只是在點擊複選框而不是在懸停時纔會改變。

任何幫助讚賞！

fiddle here

Answer 1

，因爲它是display: none你不能懸停輸入。添加您:hover到標籤：

input.faChkRnd + label:hover:before { 
    color: red; 
} 

Updated fiddle

Answer 2

我們不能擁有display:none性質的元素的目標上懸停狀態。我們可以在label上懸停。

//when input is not checked 
input.faChkRnd + label:hover:before { 
    color: red; 
} 

//when input is checked 
input.faChkRnd:checked + label:hover:before { 
    color: green; 
} 

https://jsfiddle.net/a0s0gkxb/3/

這個庫可以幫助定製複選框和單選按鈕，https://lokesh-coder.github.io/pretty-checkbox/