Estoy tratando de hacer un pequeño cambio de css basado en el movimiento del mouse del usuario dentro o fuera de un elemento. El evento onMouseOver funciona bien, pero cuando trato de restablecer el css después de que el usuario mueve el mouse usando onMouseOut parece que no sucede nada.
Aquí hay un violín: https://jsfiddle.net/2awspkeb/3/
Y aquí está el código:
<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><Solo necesitabas agregar el 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