jQuery Hover Panes Flickering on child

Question

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?

Answer 1

I am not understanding completely what you are after. But I added another hide (see below) that hides the hover tab on startup as well.

I just put that in my document ready above your mouseenter/leave bindings. When I did that the tab did not show on page load and the child cleanly was displaying and hiding when I hover over the li.

Not sure if I over looked what you are after, but that seemed to clean it up for me.

$(document).ready(function(){
    $('ul.tabNavigation div.hoverTab').hide();

    $('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');
            });

    });

Answer 2

D'oh. I figured it out...and I should've put the full code in properly 'cause it's this:

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

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

Which makes all the difference....I'd stupidly assigned the mouseenter/leave to all the child LI tags as well...

Changing the selectors to:

$('ul.tabNavigation > li')

made it work correctly...