He hecho (tomado de w3) un menú con estilo de presentación de diapositivas. Me gustaría tenerlo cuando el usuario se desplaza sobre el menú, la presentación de diapositivas se detendrá y el usuario tomará el control manualmente, luego continuará cuando el usuario haya abandonado el contenedor.
Actualmente, la reproducción automática no funciona ya que mi intento fallido de un detector de eventos no llama a la función. Probé varios métodos con mi cerebro suave, agregando parámetros en showSlides que solo deberían funcionar si son ciertos. El setTimeout es difícil de determinar dónde debo colocarlo. Si lo dejo en showSlides, crea este bucle sin fin.
editar: agregó una llave que falta
html
<div class="hero-navigate"> <a href="" class="">BEGINNERS</a> <a href="" class="">UNDER 18's</a> <a href="" class="">EXPERIENCED</a> <a href="" class="">CLASSES</a> <a href="" class="">GROUPS</a> <a href="" class="">INFO</a> </div>scs
a { width: min-content; display: block; color: #fae3df; text-decoration: none; font-family: lato, sans-serif; font-weight: 900; font-size: 4.5vw; white-space: nowrap; transform: skew(0deg, -6deg); line-height: 5.5vw; transition: 0.2s; } a:hover, .hover { color: #31368a; font-size: 5vw; transition: 0.5s; }js
let slideIndex = 0; const hero = document.querySelector('.hero-navigate'); const aTags = document.querySelectorAll('.hero-navigate a'); document.addEventListener('mousemove', (event) => { if(event.target !== hero){ setTimeout(showSlides(), 1800); }}); function showSlides() { // code removing current hover var i; for (i = 0; i < aTags.length; i++) { aTags[i].classList.remove("hover"); } //adding hover using slideIndex slideIndex++; if (slideIndex > aTags.length) {slideIndex = 1} aTags[slideIndex-1].classList.add('hover') }Esto parece funcionar:
let slideIndex = 0; const hero = document.querySelector('.hero-navigate'); const aTags = document.querySelectorAll('.hero-navigate a'); document.addEventListener('DOMContentLoaded', function(){ aTags.forEach(e => e.addEventListener('mouseenter', function(i){ const active = document.querySelector('.hover'); active.classList.remove("hover"); e.classList.add("hover"); slideIndex = Array.prototype.indexOf.call(e.parentNode.children, e); })) setInterval( hero.onmouseleave = function() { showSlides(); }, 1800 ) }) function showSlides() { // code removing current hover var i; for (i = 0; i < aTags.length; i++) { aTags[i].classList.remove("hover"); } //adding hover using slideIndex slideIndex++; if (slideIndex > aTags.length) {slideIndex = 1} aTags[slideIndex-1].classList.add('hover') }Se eliminó un: hover
.hover { color: #31368a; font-size: 5vw; transition: 0.5s; }Primero elimine el evento mousemove . Se activa cuando mueve el mouse una y otra vez. Por eso está saltando. Desea que solo cancele un temporizador cuando pase el mouse sobre algo. Entonces, al pasar el mouse, cancela el tiempo. mouseout , reinicie su temporizador.