0

好的。这是我的基本 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 ...

有什么建议么？

4

2 回答 2

0

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

我只是把它放在我的文档中，在你的 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');
            });

    });
于 2010-05-05T16:36:40.360 回答
0

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

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

这一切都不同了......我愚蠢地将鼠标输入/离开分配给所有子LI标签......

将选择器更改为：

$('ul.tabNavigation > li')

使它正常工作...

于 2010-05-05T16:46:04.440 回答