Question

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

http://codepen.io/sinrise/pen/gPZmRm

HTML

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

CSS（SCSS）

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

JS

$(".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");
});

Answer 1

只需将<span>Subcategory</span>放入标签标签

即可

<label for="subcat-check-test"></label><span>Subcategory</span>

我已更新您的代码。您可以查看http://codepen.io/anon/pen/eJbvQw

自定义样式的复选框悬停，然后点击不起作用的标签

1 个答案: