Menu Hover Effect - Studio Theme

Store Design
, , ,
1

Hey everyone!

Can someone help me with menu hover? I tried this code but it does not work when we try to interact with dropdown (I have a mega menu)

<script>
  let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
  console.log(items)
  items.forEach(item => {
    item.addEventListener("mouseover", () => {
      item.setAttribute("open", true);
      item.querySelector("ul").addEventListener("mouseleave", () => {
        item.removeAttribute("open");
      });
    item.addEventListener("mouseleave", () => {
      item.removeAttribute("open");
    });
  });
  
  });
</script>
2

Hi @selleranna , try the below given code:

document.addEventListener("DOMContentLoaded", () => {
  let items = document.querySelectorAll(".header__inline-menu details");
  items.forEach(item => {
    item.addEventListener("mouseenter", () => {
      item.setAttribute("open", true);
    });
    item.addEventListener("mouseleave", () => {
      item.removeAttribute("open");
    });
  });
});

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

3

Hello it is still not working

4

Hi @selleranna ,

Please send me the store link, and I will check it for you