Estoy tratando de cambiar el fondo de un sitio web moviendo el mouse hacia la mitad superior (se vuelve naranja) o hacia la parte inferior (se vuelve azul) de la pantalla. Parece funcionar de la manera que imaginé, pero hay un problema: tan pronto como se activó el evento azul, no puedo volver a cambiarlo a naranja. Aunque funciona de la manera opuesta: entonces puedo mover el mouse hacia la parte superior de la pantalla y se vuelve naranja, luego lo muevo hacia la parte inferior y se vuelve azul, pero ya no volverá a ser naranja:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .orange-theme { background-color: orange; } .blue-theme { background-color: blue; } </style> </head> <body> <div style="height:50vh"> <button style="height:100%;width:100vw;opacity:0" class="orange" id="change-background-orange"/> </div> <img src="http://www.example.png" class="wp-image-124" style="float:centre;width:100%"/> <div style="height:50vh"> <button style="height:100%;width:100vw;opacity:0" class="blue" id="change-background-blue"/> </div> <script> document.getElementById("change-background-orange").addEventListener("mouseover", function() { document.body.classList.add("orange-theme"); }); document.getElementById("change-background-blue").addEventListener("mouseover", function() { document.body.classList.add("blue-theme"); }); </script> </body> </html>También me pregunto si hay alguna forma de colocar el puntero del mouse justo en el centro de la página, cuando se carga el sitio. Porque de lo contrario podría cambiar instantáneamente el color. Preferiría que el sitio web fuera completamente blanco, con solo la imagen visible, siempre que no se mueva el mouse.
Gracias por adelantado
Elimine la clase css que no desea mientras agrega la clase css que desea cada vez, es decir:
document.body.classList.remove("blue-theme"); document.body.classList.add("orange-theme"); document.getElementById("change-background-orange").addEventListener("mouseover", function() { document.body.classList.remove("blue-theme"); document.body.classList.add("orange-theme"); }); document.getElementById("change-background-blue").addEventListener("mouseover", function() { document.body.classList.remove("orange-theme"); document.body.classList.add("blue-theme"); }); .orange-theme { background-color: orange; } .blue-theme { background-color: blue; } <div style="height:50vh"> <button style="height:100%;width:100vw;opacity:0" class="orange" id="change-background-orange"/> </div> <img src="http://www.example.png" class="wp-image-124" style="float:centre;width:100%"/> <div style="height:50vh"> <button style="height:100%;width:100vw;opacity:0" class="blue" id="change-background-blue"/> </div> Pero esto podría ser más divertido: use un solo mousemove listener y anime el fondo del cuerpo usando la transition css. En lugar de una instrucción IF/ELSE, puede usar la detección de la posición del mouse como parámetro de force en classList.toggle
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle
let c = document.querySelector("#container"); c.addEventListener("mousemove", e => { document.body.classList.toggle("blue-theme", (e.offsetY < c.clientHeight / 2)); document.body.classList.toggle("orange-theme", (e.offsetY >= c.clientHeight / 2)); }); body { transition: background-color 0.5s ease; } .orange-theme { background-color: orange; } .blue-theme { background-color: blue; } <div style="height:50vh" id="container"> <button style="height:100%;width:100vw;opacity:0" class="orange" id="change-background-orange" /> </div> <img src="http://www.example.png" class="wp-image-124" style="float:centre;width:100%" /> <div style="height:50vh"> <button style="height:100%;width:100vw;opacity:0" class="blue" id="change-background-blue" /> </div>