title: Custom styled checkbox hover and click on label not working
body: <p>I discovered a really slick way to create custom styled checkboxes using pure CSS. One drawback is that you have to click on the box itself (really the label) to check the box. If you are familiar with the method of putting the actual input inside the label, you'll know this allows you to click on the label text or the box to check it. The drawback to this is you can't actually style a checkbox (because, for some reason, when it comes to CSS and forms, we all still live in purgatory.) So to get the best of both worlds I'm trying to use javascript to trigger hover and click states. I think I'm missing something either in my JS or CSS but I'm not seeing it. The classes are being applied but the CSS just isn't being applied and I'm stumped. I haven't added the click events yet. I'm still just trying to get the hover state. Hover over the box itself to see what I'm trying to do with hovering the text, too.</p>
  
  <p><a href="http://codepen.io/sinrise/pen/gPZmRm" rel="nofollow">http://codepen.io/sinrise/pen/gPZmRm</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;ul class="subcategories"&gt;
      &lt;li id="subcat-test"&gt;
        &lt;div class="tmi-checkbox"&gt;
          &lt;input type="checkbox" id="subcat-check-test" value="none" /&gt;
          &lt;label for="subcat-check-test"&gt;&lt;/label&gt;&lt;span&gt;Subcategory&lt;/span&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS (SCSS)</p>
  
  <pre><code>.container { padding: 50px; }
  ul.subcategories {
      list-style: none;
      padding: 0;
      li {
          &amp;:hover { cursor: pointer; }
          position: relative;
          .tmi-checkbox {
              position: relative;
              display: block;
              margin: 0 0 15px 0;
              input[type="checkbox"] {
                  visibility: hidden;
                  &amp;:checked + label:after {
                      opacity: 1;
                      // color of check inside box
                      border-color: #fff;
                  }
                  &amp;:checked + label {
                      background: orange;
                      border-color: orange;
                  }
              }
              label {
                  position: absolute;
                  top: 0;
                  width: 18px;
                  height: 18px;
                  border-radius: 3px;
                  border: 1px solid #ccc;
                  &amp;:hover { cursor: pointer; }
                  &amp;: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);
                  }
                  &amp;:hover::after {
                      opacity: 0.3;
                      cursor: pointer;
                  }
              }
              span {
                  display: block;
                  position: absolute;
                  margin-left: 30px;
                  top: 0;
                  max-width: 230px;
                  color: #4a4a4a;
                  left: 10px;
              }
          }
      }
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(".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");
  });
  </code></pre>