En un sitio web que estoy creando, tengo un botón con una animación de desplazamiento, y cuando haces clic en el botón, muchas cosas en la página, incluido el botón, se mueven. Mi problema es que incluso después de que el botón sale de debajo del mouse, no se actualiza y pierde su efecto de desplazamiento hasta que mueve el mouse nuevamente.
Aquí hay un ejemplo: aquí, una vez que hace clic en el botón, permanece azul claro (el color sobre el que se desplaza) hasta que mueve el mouse nuevamente.
function clicked() { if (document.getElementById('mydiv').style.transform == 'translateY(70px)') { document.getElementById('mydiv').style.transform = 'translateY(0px)'; } else { document.getElementById('mydiv').style.transform = 'translateY(70px)'; } }; div { background-color: #fedcba; padding: 20px; display: inline-block; } div:hover { background-color: #abcdef; } <div id="mydiv" onclick="clicked();">Click me</div>¿Cómo hago que el elemento se actualice sin que el usuario necesite mover el mouse nuevamente? JQuery está bien.
Creo que con su enfoque actual de CSS no podrá manejar eso. Pruebe con otro enfoque de JavaScript:
const el = document.getElementById('mydiv'); el.addEventListener('click', () => { if(el.style.transform == 'translateY(50px)') { el.style.transform = 'translateY(0px)'; } else { el.style.transform = 'translateY(50px)'; } el.style.background = "#fedcba"; }); el.addEventListener('mouseover', () => { el.style.background = "#abcdef"; }); el.addEventListener('mouseout', () => { el.style.background = "#fedcba"; }); div { background: #fedcba; padding: 20px; display: inline-block; } <div id="mydiv">Click me</div>Si extrae el "desplazamiento" en el código JS, puede actualizar el estado del elemento sin que el usuario tenga que mover el mouse.