取消选中复选框时禁用 :hover 效果

Question

如何在取消选中复选框时删除 "hover" 或隐藏它。现在，当我取消选中一个复选框时，悬停效果仍然存在，看起来很奇怪（见图）。看起来复选框已被选中，但实际上用户已取消选中它但悬停效果仍然存在

编辑：

吸尘器在 css

中看起来像这样

.myclass:hover + span { 
position: absolute;
margin: 0px;
background-image: url(../img/image.svg);
background-size: cover;
background-color: #fff;
border: none;
width: 18px;
height: 18px;
left: 93.2%;
top: 52px;

}

Answer 1

确保通过 class 添加悬停，然后在取消选中该框时删除悬停 class：

var $cb = $("input[type=checkbox]");
if(!$cb.attr("checked")){
    $("input[type=checkbox]").removeClass("hover");
}

取消选中复选框时禁用 :hover 效果

Disable the :hover effect when unchecking a checkbox

css

jquery

hover