单击后，从复选框中删除悬停类 [英] Remove a hover class from a checkbox once clicked

问题描述

单击框后，我试图删除通过CSS应用于复选框的悬停类.有人知道该怎么做吗?

I am trying to remove a hover class applied to a checkbox via CSS once the box has been clicked. Does anyone know how to do this?

JSFiddle http://jsfiddle.net/sa9fe/

JSFiddle http://jsfiddle.net/sa9fe/

复选框代码为:

    <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如下:

And the CSS for the checkbox are as follows:

.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.

Also does anyone know how to change the highlight because at the moment it seems to highlight the edges of the box at a border radius of 3px whereas the boxes I am using are 6px.

推荐答案

所以只需添加

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

，如果要删除蓝色边框，请在 .regular-checkbox 类

and if you want remove blue border add outline:0; on your .regular-checkbox class

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

这篇关于单击后，从复选框中删除悬停类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！