Remove class on hover


Joined
Jul 21, 2022
Messages
2
Reaction score
0
Here is my HTML

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
 
Ad

Advertisements

Joined
Jul 3, 2022
Messages
14
Reaction score
0
HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    .hidden{
    display: none;
    }
    </style>
   <script>
   onload = function(){
   [...document.querySelectorAll('.image-link-hover')].forEach( el => {
   el.addEventListener('mouseenter', function(){
   this.childNodes[3].classList.toggle('hidden');
   });
   el.addEventListener('mouseleave', function(){
   this.childNodes[3].classList.toggle('hidden');
   });
   } );
   }
   </script>
  </head>
  <body>   
      <a href="/products/product?selected_colour=Green" class="image-link-hover">
            <img class="w-full mb-10 image-link-hover__image" src="https://www.thecodingforums.com/styles/default/custom/logo.png" alt="logo" />

            <span data-hover-img="" class="hover-img hidden">some content 1</span>

          </a>
          <a href="/products/product?selected_colour=Green" class="image-link-hover">
            <img class="w-full mb-10 image-link-hover__image" src="https://www.thecodingforums.com/styles/default/custom/logo.png" alt="logo" />

            <span data-hover-img="" class="hover-img hidden">some content 2</span>

          </a>
          <a href="/products/product?selected_colour=Green" class="image-link-hover">
            <img class="w-full mb-10 image-link-hover__image" src="https://www.thecodingforums.com/styles/default/custom/logo.png" alt="logo" />

            <span data-hover-img="" class="hover-img hidden">some content 3</span>

          </a>
  </body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top