0

I have menu items in a navigation, and when they're hovered, I apply a class, and when they're not hovered, remove a class via .toggleClass().

However, if someone clicks on one of these menu item and their mouse remains on top of that menu as the page reloads, when the page reloads, the class is being added when the mouse no longer hovers over that menu item and removed when the menu item is hovered -- exact opposite of what I want.

HTML

<div class="mega-menu">
  <div class="mega-menu-2 mega-menu-item">{mega-menu-2:content}</div>
</div>

jQuery

$('.wsite-nav-2, .mega-menu-2').on('hover', function(e) {
  $('.nav, .nav .container').css('overflow', 'initial');
    e.preventDefault();
  $('.mega-menu-2').removeClass('show');
  $('.mega-menu-2').toggleClass('show');
});
Weebs
  • 155
  • 2
  • 10
  • Where is the code that removes the class? Where you have it now it is immediately followed by a toggle, so it can't be that. – trincot Feb 06 '18 at 20:32
  • `.removeClass` followed by `.toggleClass` is the same as `addClass`. – Barmar Feb 06 '18 at 20:32
  • Yes, which is my hope that when the page loads, the menu item will be hovered, so if the class was applied, it would be removed -- clean slate. Then .togglelClass() could take over correctly. – Weebs Feb 06 '18 at 20:34
  • Don't use `toggleClass` unless you have full control (which you don't). Explicitly use `addClass` / `removeClass`. You could check if the mouse is over the item on page load, eg with this: https://stackoverflow.com/a/42539345/2181514 or something like `$(".mega-menu-2').is(":hover")` (see here for code compatible with latest jquery: https://stackoverflow.com/a/8981521/2181514) . – freedomn-m Feb 06 '18 at 20:37
  • Or just use css `:hover` – freedomn-m Feb 06 '18 at 20:38

1 Answers1

1

You can fix that by explicitly using .hover() to check which direction it's going, and then instead of toggling, explicitly set the CSS you want. The use of toggle is the problem, you should just always set what the state should be, not the opposite of the current state.

$('.item').hover(function() {
  // hover IN
  $('.mega-menu-2').addClass('show');
}, function() {
  // hover OUT
  $('.mega-menu-2').removeClass('show');
});
Tallboy
  • 12,847
  • 13
  • 82
  • 173
  • Just implemented this and it does the exact same thing as my code. When the mouse remains on the menu item when the page loads, the class is added when it's not hovered and removed when it's hovered. – Weebs Feb 06 '18 at 20:41
  • I don't see how that is possible if you're positive you're not using `toggle`. the `.hover()` function expects two callback functions which will only fire appropriately. – Tallboy Feb 06 '18 at 20:43
  • You could also attempt to do this with `.mouseover()` and `. mouseout()` as well, and just write 2 separate functions, and move the code from the exapmle above into `mouseover` and the other one in `mouseout` – Tallboy Feb 06 '18 at 20:45
  • Your original answer did in fact work. There was an issue with changes reflecting on the live site when it was published. Thank you! – Weebs Feb 07 '18 at 18:05