Databases
StackOverflow2013
Postsdbo
PORemove hover activation on current element on click
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORemove hover activation on current element on click
    text
    copied!<p>I have a dropdown menu that works in two ways</p> <ol> <li>Classic CSS hover</li> <li>If you click the top level li it adds a class to the menu with jQuery which makes the menu show.</li> </ol> <p>I have a close button in the menu to close it if you've opened the menu with a click event. I wanted to do it by removing the class on the menu. This works, except because you're still hovering over the menu the menu doesn't disappear until you hover off which isn't ideal. I also tried using <code>.hide()</code> but then that messes with CSS hover functionality.</p> <p>Is there a way in jQuery to remove the CSS hover activation of an element? Below is how I've made it work, but I feel I can do it with less JS if I can unbind CSS hover.</p> <pre><code> // Add class 'show' to .meganav__container. Visibility is controlled by CSS $('.meganav &gt; li &gt; a').on('click',function(){ $('.meganav__container').removeClass('show'); $(this).parents('li').children('.meganav__container').toggleClass('show'); }); // Closes menu when close button is clicked $('.subnav__container .close').on('click', function(){ $(this).parents('.meganav__container').hide(); }); // For UX I'd like the menu to still work with hover $('.meganav &gt; li').hover( function(){ $(this).children('.meganav__container').show(); }, function(){ $(this).children('.meganav__container').hide(); } ); </code></pre> <p>This is how I would prefer it to work</p> <pre><code>// Add class 'show' to .meganav__container. Visibility is controlled by CSS $('.meganav &gt; li &gt; a').on('click',function(){ $('.meganav__container').removeClass('show'); $(this).parents('li').children('.meganav__container').toggleClass('show'); }); // Closes menu when close button is clicked $('.subnav__container .close').on('click', function(){ //Remove hover on parent li but this doesn't work $(this).parents('li').unbind('onmouseover').unbind('onmouseout'); $(this).parents('.meganav__container').removeClass('show'); }); </code></pre> <p><a href="http://jsfiddle.net/HeyVian/Yx7P5/" rel="nofollow"><strong>Fiddle with it</strong></a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload