jQuery悬停窗格在孩子身上闪烁答案

【问题标题】：jQuery Hover Panes Flickering on childjQuery悬停窗格在孩子身上闪烁
【发布时间】：2011-02-16 00:38:34
【问题描述】：

好的。这是我的基本 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/mouseleave LI 时，子 div 应该出现/消失，但问题是 hoverTab div 中的 A 标签导致标签闪烁 - 好像通过滚动链接，鼠标已经离开李...

有什么建议吗？

【问题讨论】：

标签： jquery hyperlink hover mouseenter

【解决方案1】：

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

我只是将它放在我的文档中，准备好在鼠标输入/离开绑定上方。当我这样做时，标签没有在页面加载时显示，当我将鼠标悬停在 li 上时，孩子干净地显示和隐藏。

不确定我是否过度关注了你的目标，但这似乎为我清理了一切。

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

    });

【讨论】：

【解决方案2】：

哦。我想通了...我应该正确地输入完整的代码，因为它是这样的：

<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/leave 分配给所有子 LI 标记...

将选择器更改为：

$('ul.tabNavigation > li')

让它正常工作...

【讨论】：