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
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