Javascript 自定义样式复选框悬停并单击标签不工作

我发现了一种使用纯CSS创建自定义样式复选框的非常巧妙的方法。一个缺点是您必须单击框本身（实际上是标签）才能选中该框。如果您熟悉将实际输入放入标签中的方法，您就会知道这允许您单击标签文本或复选框进行检查。这样做的缺点是，您实际上无法设置复选框的样式（因为，出于某种原因，当涉及到CSS和表单时，我们仍然生活在炼狱中）。因此，为了充分利用这两个世界，我尝试使用javascript来触发悬停和单击状态。我想我在JS或CSS中遗漏了一些东西，但我没有看到。这些类正在被应用，但是CSS没有被应用，我被难住了。我还没有添加点击事件。我还在试着进入悬停状态。将鼠标悬停在框本身上，查看我也在尝试对文本进行悬停

HTML

JS

只需将

子类别

放在标签标签内即可

子类别

---

我已经更新了你的代码。您可以选中它

当您将鼠标悬停在container div.tmi-checkbox上时，为什么不在元素上添加类呢？或者你可以尝试使用CSS的解决方案，像这支笔（不是我的）太棒了！这工作得非常好，没有javascript，而且响应性很好。非常感谢！这在笔中非常有效，但由于某些原因，它在我的实际实现中对宽度起到了很大的作用。出于某些原因，最大宽度没有得到尊重。如果我以像素为单位设置一个静态宽度，我只能得到配合的宽度。“最小宽度”（min width）也可以工作，但它不会扩展。

<div class="container">
  <ul class="subcategories">
    <li id="subcat-test">
      <div class="tmi-checkbox">
        <input type="checkbox" id="subcat-check-test" value="none" />
        <label for="subcat-check-test"></label><span>Subcategory</span>
      </div>
    </li>
  </ul>
</div>

.container { padding: 50px; }
ul.subcategories {
    list-style: none;
    padding: 0;
    li {
        &:hover { cursor: pointer; }
        position: relative;
        .tmi-checkbox {
            position: relative;
            display: block;
            margin: 0 0 15px 0;
            input[type="checkbox"] {
                visibility: hidden;
                &:checked + label:after {
                    opacity: 1;
                    // color of check inside box
                    border-color: #fff;
                }
                &:checked + label {
                    background: orange;
                    border-color: orange;
                }
            }
            label {
                position: absolute;
                top: 0;
                width: 18px;
                height: 18px;
                border-radius: 3px;
                border: 1px solid #ccc;
                &:hover { cursor: pointer; }
                &:after {
                  opacity: 0;
                  content: '';
                  position: absolute;
                  width: 11px;
                  height: 7px;
                  background: transparent;
                  top: 3px;
                  left: 3px;
                  border: 3px solid #333;
                  border-top: none;
                  border-right: none;
                  -webkit-transform: rotate(-45deg);
                  -moz-transform: rotate(-45deg);
                  -o-transform: rotate(-45deg);
                  -ms-transform: rotate(-45deg);
                  transform: rotate(-45deg);
                }
                &:hover::after {
                    opacity: 0.3;
                    cursor: pointer;
                }
            }
            span {
                display: block;
                position: absolute;
                margin-left: 30px;
                top: 0;
                max-width: 230px;
                color: #4a4a4a;
                left: 10px;
            }
        }
    }
}

$(".subcategories li").hover(function() {
  $(this).find("label").addClass("tmi-checkbox-label-hover");
  $(this).find("input").addClass("tmi-checkbox-hover");
}, function() {
  $(this).find("label").removeClass("tmi-checkbox-label-hover");
  $(this).find("input").removeClass("tmi-checkbox-hover");
});