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><
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