jQuery 悬停窗格在子项上闪烁

发布于 2024-08-31 23:04:32 字数 770 浏览 6 评论 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');
});

当您鼠标进入/鼠标离开 LI 时，子 div 应该出现/消失，但问题是悬停选项卡 div 中的 A 标记导致选项卡闪烁 - 就好像，通过滚动链接，鼠标已离开 LI...

有什么建议吗？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦情居士 2024-09-07 23:04:32

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

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

    });

I am not understanding completely what you are after. But I added another hide (see below) that hides the hover tab on startup as well.

I just put that in my document ready above your mouseenter/leave bindings. When I did that the tab did not show on page load and the child cleanly was displaying and hiding when I hover over the li.

Not sure if I over looked what you are after, but that seemed to clean it up for me.

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

    });

回复收藏 0 原文

野の 2024-09-07 23:04:32

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

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

使其正常工作...

D'oh. I figured it out...and I should've put the full code in properly 'cause it's this:

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

Which makes all the difference....I'd stupidly assigned the mouseenter/leave to all the child LI tags as well...

Changing the selectors to: