Estoy tratando de llamar a una función solo si el usuario pasó el cursor sobre el objetivo durante una cierta cantidad de segundos. Por lo tanto, no se dispara instantáneamente y tampoco solo se dispara después de un período de tiempo, sino que solo se dispara si el usuario se desplazó durante todo el período de tiempo. Si esto pudiera hacerse en JavaScript, sería fantástico. Gracias por adelantado
Simplemente establezca un tiempo de espera cuando el mouse pase el div y bórrelo cuando el mouse abandone el div. De esta manera, la devolución de llamada se activará solo y solo si el mouse permaneció dentro del div durante n segundos
const el = document.querySelector('.hover-me'); let timeoutHandler = null; el.addEventListener('mouseenter', () => { timeoutHandler = setTimeout(() => alert('Hovered for 2 seconds'), 2000); }); el.addEventListener('mouseleave', () => { if (timeoutHandler) clearTimeout(timeoutHandler); timeoutHandler = null; }); div.hover-me { width: 200px; height: 200px; background-color: lightblue; } <div class="hover-me">Hover me</div>