Menu hover not working

[annevdheijden]

Hi support team,

I’m trying to achieve the menu’s on my website to hover. I’m using PRO with Ethos stack. I’ve been reading on this forum and I’ve seen that the menu’s should, by default, have this hover function. Unfortunately this doesn’t work on my site. I’ve tried this on several laptops and computers. Non of them touch enabled, all mouse enabled. I need to click on an icon to open the menu and when I want to close it, I need to click on that specific icon again.

I’ve two menu’s where I want this hover effect to take place:
One on the top:

And one on the right:

I’ve been writing some custom JS code to make this hover possible. I’ve come a long way, but have some troubles now with keeping the hover open longer. When I move my mouse over it or try to select something, it disappears really quickly.

Can you please help me solve this problem? This is the custom JS I’ve uploaded within the theme options:

jQuery(document).ready(function($) {
$(’.x-anchor-toggle’).mouseenter(function(){
$(this).next().addClass(“x-active”);
/* setTimeout(function () {
$(’.x-anchor-toggle’).next().addClass(“x-active”);
}, 250);
/
})
});
jQuery(document).ready(function($) {
$(’.x-anchor-toggle’).mouseleave(function(){
/ $(this).next().delay(1000).removeClass(“x-active”); */
setTimeout(function () {
$(’.x-anchor-toggle’).next().removeClass(“x-active”);
}, 500);
})
});
jQuery(document).ready(function($) {
$(’.x-dropdown’).mouseenter(function(){
$(this).addClass(“x-active”);
})
});
jQuery(document).ready(function($) {
$(’.x-dropdown’).delay(1000).mouseleave(function(){
$(this).removeClass(“x-active”);
})
});

I’ll provide my credentials in a secure note. Can you please help me make the hover function work for my website?

Thanks in advance!

[christian]

Hey @annevdheijden,

Hover effects work on my end. Here’s what I see https://youtu.be/UtK_qCAtXlY and https://youtu.be/513MYV3JLwE

Please clear your browser’s cache and also try in incognito.

May I ask why you’re using Javascript? The menu does have hover effect options. Please see the anchor interactions tutorial here.

Thanks.

[annevdheijden]

Hi @christian_y,

Thanks for your quick reaction. But it is the very top menu with the icons that I meant in my post. This works only on click, and should work on hover.

Best,

Anne

[albrecht]

Hi Anne,

Your JS is awesome but the problem is that the area disappears after a short delay.

Try this JS. The dropdown will only disappear when your mouse moves out of the hover area.

jQuery(document).ready(function($) {
  $('.x-mod-container').hover(function(){
		$(this).find('.x-dropdown').addClass("x-active");
   	}, function() {
        $(this).find('.x-dropdown').removeClass("x-active");
    });
});

Hope it works.

[annevdheijden]

Hi Albrechtx,

Thank you so much, that seems to do the trick. I’ll do some testing with it. Might there be any problem I’ll let you know. For now I just like to thank you for your help!

Cheers!

[nabeel]

Glad it worked.

Cheers!