title: CSS :hover not working on element with dynamically added class
body: <p>After Dom ready I'm detecting if the mouse moves and attaching a class "has-hover" to a parent div.</p>
  
  <p>Inside it are two labels. The first one has its hover state attached to the "has-hover" class of its parent div, which is the functionality I want to achieve.</p>
  
  <p>The second label has its hover state attached directly to it.</p>
  
  <p>Why does the hover state works on the second label but not in the first one??</p>
  
  <p>Thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function watchForHover() {
   var div = $(".div");
    var hasHoverClass = false;
  
   function enableHover() {
     if (hasHoverClass) return;
    div.addClass("has-hover");
    hasHoverClass = true;
   };
    
   document.addEventListener("mousemove", enableHover, true);
  };
  
  watchForHover();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>label {
    width: 70px;
    height: 70px;
    margin: 5px;
    color: white;
    background-color: red;
    transition: all 0.3s;
    display: block;
  }
  .has-hover {
    label:first-child:hover {
      opacity: 0.5;
    }
  }
  label:nth-child(2):hover {
    opacity: 0.5;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="div"&gt;
  &lt;label&gt;label 1&lt;/label&gt;
  &lt;label&gt;label 2&lt;/label&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>