title: jQuery addClass not overwriting
body: <p>This has been answered quite a few times before and all the responses seem to point to specificity of the CSS, but as far as I can tell, that does not seem to be the case here.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;button class="flex-item color-2"&gt;A&lt;/button&gt;
  &lt;button class="flex-item color-2"&gt;B&lt;/button&gt;
  &lt;button class="flex-item color-2"&gt;C&lt;/button&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$("button.color-2").hover( function(){
      $(this).addClass("color-1 bg-2");
  }, function(){
      //$(this).removeClass("color-1").removeClass("bg-2");
  });
  </code></pre>
  
  <p>Developer Tools Output</p>
  
  <p><img src="https://i.stack.imgur.com/XiN90.png" alt="enter image description here"></p>
  
  <p>I did change the background to be a class as I realized I had the background specified elsewhere.</p>
  
  <p>Now, when the javascript adds the classes, the background overwrites, but the color does not.</p>
  
  <p>Does addClass not take precedence over pre-defined colors?</p>
  
  <p>Thanks.</p>