Here is my HTML
JavaScript:
I am trying to remove the hidden class, can anyone help me here please
HTML:
<a href="/products/product?selected_colour=Green" class="image-link-hover">
<img class="w-full mb-10 image-link-hover__image" src="//cdn.shopify.com/s/files/1/1059/4836/files/image-2509_750x.jpg?v=2461239251027391459" alt="">
<span data-hover-img="" class="hover-img hidden">
<source srcset="//cdn.shopify.com/s/files/1/1059/4836/files/image-hover-2509_750x.jpg?v=11990938895799156607 1x, //cdn.shopify.com/s/files/1/1059/4836/files/[email protected]?v=11990938895799156607 2x" class="w-full mb-10 image-link-hover__image image-link-hover__image--hover">
<img class="w-full mb-10 image-link-hover__image image-link-hover__image--hover" alt="" src="//cdn.shopify.com/s/files/1/1059/4836/files/image-hover-2509_750x.jpg?v=11990938895799156607" data-src="//cdn.shopify.com/s/files/1/1059/4836/files/image-hover-2509_750x.jpg?v=11990938895799156607" data-sizes="auto" loading="lazy">
</span>
</a>
JavaScript:
JavaScript:
var imghover = document.querySelector('a.image-link-hover');
var elem = imghover.querySelector('span.hover-img', function () {
elem.addEventListener('mouseenter', function(){
this.classList.remove('hidden');
})
elem.addEventListener('mouseleave', function(){
this.classList.add('hidden');
})
});
I am trying to remove the hidden class, can anyone help me here please