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

有什么建议吗？

Answer 1

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

我只是将它放在我的文档中，准备好在mouseenter / leave绑定之上。当我这样做时，标签没有在页面加载时显示，当我将鼠标悬停在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');
            });

    });

Answer 2

D'哦。我想通了......我应该把正确的代码放进去，因为它是这样的：

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

让它正常工作......

jQuery Hover Panes闪烁着孩子

2 个答案: