jQuery Hover Panes Flickering on child
- by Dirge2000
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?
