While solving a problem, i ran into another one which is not of the same nature, so here it goes!
Why is it that the first one works, but i can't seem to access the play() on the other examples.
The reason i want to do this is that my hover should be on the entire .box and not just the svg element...
Please help, i've been scratching my head for a couple of days now.. i'm sure it's a beginner's mistake.
Thanks!
// 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>Using Vanilla JS:
document
.querySelectorAll('lottie-player')
.forEach(player => player.onmouseover = () => player.play());
Using a single delegate listener:
document.body.addEventListener('mouseover', function (event) {
if (this.matches('lottie-player') this.play;
});