单击后从复选框中删除悬停类答案

【问题标题】：Remove a hover class from a checkbox once clicked单击后从复选框中删除悬停类
【发布时间】：2014-07-26 05:00:39
【问题描述】：

单击框后，我正在尝试通过 CSS 删除应用于复选框的悬停类。有人知道怎么做吗？

复选框代码为：

    <div>
     <input type="checkbox" id="checkbox-1-1" class="regular-checkbox flaticon-boxing3" />
     <input type="checkbox" id="checkbox-1-2" class="regular-checkbox" />
     <input type="checkbox" id="checkbox-1-3" class="regular-checkbox" />
     <input type="checkbox" id="checkbox-1-4" class="regular-checkbox" />
    </div>

复选框的CSS如下：

.regular-checkbox {
vertical-align: middle;
text-align: center;
margin-left: auto;
margin-right: auto;
align: center;
color: #39c;
width: 140px;
height: 140px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background-color: #fff;
border: solid 1px #ccc;
-webkit-appearance: none;
background-color: #fff;
display: inline-block;
position: relative;}

.regular-checkbox:checked {
background-color: #39c;
color: #fff !important;}

.regular-checkbox:hover {
background-color: #f0f7f9;}

.regular-checkbox:checked:after {
color: #fff;
position: absolute;
top: 0px;
left: 3px;
color: #99a1a7; }

有什么建议吗？

还有人知道如何更改高光，因为目前它似乎以 3px 的边界半径突出框的边缘，而我使用的框是 6px。

【问题讨论】：

看到您可以创建一个 jsFiddle 以便我们查看您的代码并提供帮助吗？
stackoverflow.com/questions/13725811/… 可能重复
@ElendilTheTall 您链接到的帖子涉及 jQuery，而这里的 OP 询问的是 CSS 问题。
@seangeraghty 目前尚不清楚预期的结果是什么。您的代码似乎没有尝试对已检查和悬停的元素进行样式设置。您是否在问如何链接伪选择器？只需尝试checked:hover。
@Boaz 请在此处查看 JSFiddle：jsfiddle.net/sa9fe

标签： html css checkbox hover

【解决方案1】：

所以添加这个

.regular-checkbox:checked, .regular-checkbox:checked:hover {
    background-color: #39c;
    color: #fff !important;
}

如果您想删除蓝色边框，请在您的 .regular-checkbox 类中添加 outline:0;

http://jsfiddle.net/sa9fe/4/

【讨论】：

太棒了！工作一种享受！

【解决方案2】：

你在找这个吗

.regular-checkbox:checked:hover {
    background-color: #39c;
    color: #fff !important;
}

小提琴：http://jsfiddle.net/sa9fe/5/

【讨论】：

【解决方案3】：

如果您熟悉 jQuery，您可以为特定复选框定义 onClick 事件，并在函数内部使用 removeClass(classname)。您可以在jQuery api site 找到更多信息。

【讨论】：