jQuery Hover Panes Flickering on child

Posted by Dirge2000 on Stack Overflow See other posts from Stack Overflow or by Dirge2000
Published on 2010-05-05T16:16:55Z Indexed on 2010/05/05 16:38 UTC
Read the original article Hit count: 255

Filed under:
|
|
|

OK. Here's my basic HTML structure:

<ul class="tabNavigation">
  <li>
    <a href="#">Main Button</a>

    <div class="hoverTab">
      <a href="#">Link Within Div</a>
    </div>
  </li>
</ul>

And here's my jQuery command:

$('ul.tabNavigation li').mouseenter(function() {
  $('ul.tabNavigation div.hoverTab').hide();
  $(this).children('div.hoverTab').stop(false, true).fadeIn('fast');
});

$('ul.tabNavigation li').mouseleave(function() {
  $('ul.tabNavigation div.hoverTab').hide();
  $(this).children('div.hoverTab').stop(false, true).show().fadeOut('fast');
});

When you mouseenter/mouseleave the LI, the child div is supposed to appear/disappear, but the problem is the A tag within the hoverTab div causes the tab to flicker - as if, by rolling over the link, the mouse has left the LI...

Any suggestions?

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about mouseenter