title: Change heading color of elements (of the same class) with a different color for the element on mouse over
body: <p>so I have 3 headings elem1 elem2 elem3  and when I go over elem1 I want elem1 in yellow, elem2 and elem3 in purple.
  When I go over elem2 I want elem2 in yellow and the other ones in purple.
  When I let go I want theese three to come back black.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Hello World!&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;body id="page"&gt;
  
          &lt;ul class="ligne_menu"&gt;
              &lt;li id="menu"&gt;
                  &lt;h1 class = "espace" id="space"&gt;    Space&lt;/h1&gt;
              &lt;/li&gt;
  
              &lt;li id="menu"&gt;
                   &lt;h1 class = "espace" id="classe"&gt;  Class&lt;/h1&gt;
              &lt;/li&gt;
              &lt;li id="menu"&gt;
                  &lt;h1 class = "espace" id="Production"&gt;Production&lt;/h1&gt;
              &lt;/li&gt;
  
          &lt;/ul&gt;
  
  
  
  &lt;script src="script.js"&gt;&lt;/script&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Javascript code</p>
  
  <pre><code>changeCouleur();
  
  
  function changeCouleur(){
      var elements = document.getElementsByClassName("espace");
      for(var i=0; i&lt;elements.length; i++) {
     //elements[i].style.color = 'green';
     elements[i].addEventListener("mouseover", function() {
      for(var j=0; j&lt;elements.length; j++){
  
          if(elements[j].type == 'mouseover'){
            elements[j].style.color == 'yellow';
          }
      }
      }, false);
  
     /*elem[i].addEventListener("mouseout", function() {
     document.body.style.backgroundColor = "white";
     intoDark();
  }, false);*/
  
      }
  }
  </code></pre>