title: How can I add/remove class on a second element with vanilla JS?
body: <p>I’ve been through a LOT of stackoverflows but haven’t figured out how to accomplish this. What I’m looking to do is pretty simple, but I’m not good with plain ole Javascript.</p>
  
  <p><strong>Desire</strong>: </p>
  
  <ul>
  <li>Mousing over #element1 adds .specialClass to #element2</li>
  <li>Mousing out #element1 removes .specialClass from #element2</li>
  </ul>
  
  <p>If I was able to use jQuery this is <em>exactly</em> what I’m looking to accomplish:</p>
  
  <pre><code>$(document).ready(function() {     
      $('#element1').hover(function(){     
          $('#element2').addClass('specialClass');    
      },     
      function(){    
          $('#element2').removeClass('specialClass');     
      });
  });
  </code></pre>
  
  <p>I need this same functionality in a plain Javascript function. I know it seems like a job for CSS, but in my very particular instance, I need this to be JS.</p>
  
  <p>** THIS QUESTION IS NOT A DUPLICATE of <a href="https://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript">
  Change an element's class with JavaScript</a> as that one uses onClick and I'm looking for mouse over/out. **</p>