我有一些简单的HTML/CSS字体真棒字体来定制复选框。当复选框悬停时,我正努力修改颜色(现在为红色)。悬停风格的自定义复选框与字体真棒
由于我使用字体真棒字体来定制复选框,我认为我需要将CSS应用于悬停的标签上,但它没有达到预期的效果。
input.faChkRnd:hover + label:before {
color: red;
}
这似乎只是在点击复选框而不是在悬停时才会改变。
任何帮助赞赏!
我有一些简单的HTML/CSS字体真棒字体来定制复选框。当复选框悬停时,我正努力修改颜色(现在为红色)。悬停风格的自定义复选框与字体真棒
由于我使用字体真棒字体来定制复选框,我认为我需要将CSS应用于悬停的标签上,但它没有达到预期的效果。
input.faChkRnd:hover + label:before {
color: red;
}
这似乎只是在点击复选框而不是在悬停时才会改变。
任何帮助赞赏!
,因为它是display: none
你不能悬停输入。添加您:hover
到标签:
input.faChkRnd + label:hover:before {
color: red;
}
我们不能拥有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/