I have successfully created an editable section in the customizer where you can upload desktop and mobile images, as well as modify the menu. My current dilemma is how to associate these background images with each "Details-id" and have them change when a user hovers over them. I am utilizing the nav-component and would like to make modifications to global.js using code from the dawn theme.
Feel free to check out the preview of this developmental theme here:
If anyone could provide guidance on this matter, it would be greatly appreciated. Thank you in advance!
This is my current setup; where should I insert the new HTML code?
<script>
//megamenu hover
let items = document.querySelector(".aside__nav").querySelectorAll("details");
items.forEach(item => {
item.addEventListener("mouseover", () => {
item.setAttribute("open", true);
item.querySelector("ul").addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
item.addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
});
});
//megamenu image show on hover
var $activeElement = $(".megamenu-text");
$(".custom-mega-img").hover(function(){
$(this).find(".megamenu-img").addClass( "active" );
}, function(){
$(".megamenu-img").removeClass( "active" );
});
</script>{CSS Code Goes Here}{Additional Code Block}