title: Conflict between onmouseover and onmouseout when using inline
body: <p>I am trying to just get a small css change done based on user moving mouse on or off an element. The <code>onMouseOver</code> event works fine, but when I try to reset the css after the user moves the mouse off using <code>onMouseOut</code> nothing appears to happen.</p>
  <p>Here is a fiddle: <a href="https://jsfiddle.net/2awspkeb/3/" rel="nofollow noreferrer">https://jsfiddle.net/2awspkeb/3/</a></p>
  <p>And here is the code:</p>
  <pre><code>
  &lt;p&gt;CSS Box Model was revolutionary because it established from there on out all HTML elements would be considered
  &lt;span class=&quot;box&quot; style=&quot;color:red;&quot; 
  onMouseOver=&quot;let elements = document.querySelectorAll('*');
               for (let i = 0; i &lt; elements.length; i++){
               elements[i].style.border = 'solid .75px black';
               }
               onmouseout
               for (let i = 0; i &lt; elements.length; i++){
               elements[i].style.border = 'none';
               }&quot;&gt;
    “boxes”&lt;/span&gt;&lt;
  </code></pre>