title: Javascript using mouse hover class to effect child ids
body: <p>I am trying to make the class navButtons effect all of the ids inside it using the mouse over  effect. I read on here that you can do this with a for loop but that would require changing the names of the ids. is there a way to do this without changing the names?</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>document.getElementsByClassName("navButtons").addEventListener("mouseover", mouseOver);
  document.getElementsByClassName("navButtons").addEventListener("mouseout", mouseOut);
  
  function mouseOver() {
      document.getElementsByClassName("navButtons").style.color = "red";
  }
  
  function mouseOut() {
      document.getElementsByClassName("navButtons").style.color = "black";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
    &lt;div class="navButtons"&gt;
        &lt;div id="about"&gt;about&lt;/div&gt;
        &lt;div id="portfolio"&gt;portfolio&lt;/div&gt;
        &lt;div id="contact"&gt;contact&lt;/div&gt;
    &lt;/div&gt;   
  &lt;/nav&gt;
  
   </code></pre>
  </div>
  </div>
  </p>