悬停风格的自定义复选框与字体真棒

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/