jQuery悬停窗格儿童闪烁

Question

好的。这里是我的基本的HTML结构：

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

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

而且这里是我的jQuery命令：

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

当你的mouseenter /鼠标离开了李，孩子的div应该出现/消失，但问题是A标签内的hoverTab div导致标签闪烁 - 仿佛通过滚动链接，鼠标离开了LI ...

有什么建议吗？

Answer 1

我不完全理解你在做什么。但是我添加了另一个隐藏（见下文），它在启动时隐藏了悬停选项卡。

我只是把它放在你的mouseenter/leave绑定的上方，准备好了。当我这样做的时候，这个标签没有显示在网页上，当我将鼠标悬停在李的上方时，孩子干净地显示和隐藏。

不知道我是否看过你以后的样子，但似乎为我清理它。

$(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。我想通了......我应该已经把完整的代码在正确“的原因那就是：

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

这使得所有的差异....我愣神分配的mouseenter /离开所有孩子LI标签，以及...

改变选择到：

$('ul.tabNavigation > li') 

使它正常工作......