Mientras resolvía un problema, me encontré con otro que no es de la misma naturaleza, ¡así que aquí va!
¿Por qué funciona el primero, pero parece que no puedo acceder al play() en los otros ejemplos?
La razón por la que quiero hacer esto es que mi desplazamiento debe estar en todo el .box y no solo en el elemento svg...
Por favor, ayuda, me he estado rascando la cabeza durante un par de días. Estoy seguro de que es un error de principiante.
¡Gracias!
// works var lottiePlayer = document.getElementsByTagName("lottie-player"); $(lottiePlayer).on('mouseover', function(event) { this.play(); }); // doesn't work $(this).find(lottiePlayer).play(); // doesn't work $(this).find('#container-horloge').play(); // doesn't work var anim = $(this).find(lottiePlayer); anim.play(); <div class="box"> <lottie-player src="/wp-content/uploads/svg/SOURCE_HERE.json"></lottie-player> <p>Lorem ipsum</p> </div> <div class="box"> <lottie-player src="/wp-content/uploads/svg/SOURCE_HERE.json"></lottie-player> <p>Lorem ipsum</p> </div> <div class="box"> <lottie-player src="/wp-content/uploads/svg/SOURCE_HERE.json"></lottie-player> <p>Lorem ipsum</p> </div>Usando vainilla JS:
document .querySelectorAll('lottie-player') .forEach(player => player.onmouseover = () => player.play());Usando un único oyente delegado:
document.body.addEventListener('mouseover', function (event) { if (this.matches('lottie-player') this.play; });