title: Fade out siblings in a list (non jQuery)
body: <p>I've created a script to fade out all items in a list when one element in the list is hovered.</p>
  
  <p>I've sort of got it to work - but the last item in the list doesn't fade in (when the last item in the list is hovered all items are faded) - the rest of the list though works correctly.</p>
  
  <p>My script is here -</p>
  
  <pre><code>var activeItems = document.querySelectorAll('.item');
  
      for (i = 0; i &lt; activeItems.length; i++) {
      activeItems[i].addEventListener("mouseover", fadeOutItems, false);
  
      activeItems[i].addEventListener("mouseout", resetListStyles, false);
  
      function fadeOutItems() {
          for (i = 0; i &lt; activeItems.length; i++) {
              this.setAttribute("class", "item fade-in");
              activeItems[i].setAttribute("class", "item fade-out");
          }
      }
  
      function resetListStyles() {
          for (i = 0; i &lt; activeItems.length; i++) {
              activeItems[i].setAttribute("class", "item");
          }
      }
  
  }
  </code></pre>
  
  <p>And have created a fiddle here -</p>
  
  <p><a href="https://jsfiddle.net/1opq1eyj/1/" rel="nofollow noreferrer">https://jsfiddle.net/1opq1eyj/1/</a></p>
  
  <p>Any advice on where i'm going wrong would be much appreciated.</p>
  
  <p>Also would be grateful for any advice on how the script could have been improved upon.</p>
  
  <p>Thanks,</p>