如何获得具有不确定属性的复选框的悬停正确行为？

Question

我正在尝试使三态复选框处于未选中状态，不确定状态和选中状态。悬停适用于未经检查和已检查的属性，但对于不确定属性无效。它显示了用于检查的after元素。我可能需要为“不确定”属性做一个after元素，但是我不知道如何只选择该状态。

var $check = $("input[type=checkbox]"),
  el;
$check
  .data('checked', 0)
  .click(function(e) {

    el = $(this);

    switch (el.data('checked')) {

      // unchecked, going indeterminate
      case 0:
        el.data('checked', 1);
        el.prop('indeterminate', true);
        break;

        // indeterminate, going checked
      case 1:
        el.data('checked', 2);
        el.prop('indeterminate', false);
        el.prop('checked', true);
        break;

        // checked, going unchecked
      default:
        el.data('checked', 0);
        el.prop('indeterminate', false);
        el.prop('checked', false);

    }

  });

input[type="checkbox"].tristate {
  display: none;
}

.tristate-check {
  border: 1px solid #ddd;
  width: 25px;
  height: 25px;
  display: block;
  background: #eee;
}

input[type="checkbox"]:hover.tristate+label {
  display: block;
  opacity: 0.5;
}

input[type="checkbox"]:hover.tristate+label:after {
  content: '';
  display: block;
  width: 6px;
  height: 12px;
  border: solid #a9a9a9;
  border-width: 0 2px 2px 0;
  transform: translate(130%, 35%) rotate(45deg);
}

input[type="checkbox"]:indeterminate.tristate+label {
  background: #00c292;
  border: 1px #ddd solid;
}

input[type="checkbox"]:indeterminate.tristate+label:after {
  content: '';
  display: block;
  width: 10px;
  height: 1px;
  background: #fff;
  margin: 12px auto;
}

input[type="checkbox"]:checked.tristate+label {
  background: #00c292;
  border: 1px #ddd solid;
}

input[type="checkbox"]:checked.tristate+label:after {
  content: '';
  display: block;
  width: 6px;
  height: 12px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: translate(130%, 35%) rotate(45deg);
}

body {
  background: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input type="checkbox" class="tristate" data-name="check-all" id="cb1">
  <label for="cb1" class="tristate-check"></label>
</div>

这里是jsfiddle