Conflict between onmouseover and onmouseout when using inline

I am trying to just get a small css change done based on user moving mouse on or off an element. The onMouseOver event works fine, but when I try to reset the css after the user moves the mouse off using onMouseOut nothing appears to happen.

Here is a fiddle: https://jsfiddle.net/2awspkeb/3/

And here is the code:

<p>CSS Box Model was revolutionary because it established from there on out all HTML elements would be considered
<span class="box" style="color:red;" 
onMouseOver="let elements = document.querySelectorAll('*');
             for (let i = 0; i < elements.length; i++){
             elements[i].style.border = 'solid .75px black';
             }
             onmouseout
             for (let i = 0; i < elements.length; i++){
             elements[i].style.border = 'none';
             }">
  “boxes”</span><

Answer

You just needed to add the onMouseOut…

<span class="box" style="color:red;" 
onMouseOver="let elements = document.querySelectorAll('*');
         for (let i = 0; i < elements.length; i++){
         elements[i].style.border = 'solid 0.75px black';
         }"
onMouseOut=" let elements = document.querySelectorAll('*');
         for (let i = 0; i < elements.length; i++){
         elements[i].style.border = 'none';
         }">“boxes”</span>

Oliver

Advertisement

Answer