jquery - mouseleave 事件后选项卡仍然显示，但仅在某些方向

发布于 2024-12-27 20:45:02 字数 5196 浏览 3 评论 0原文

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Tabs</title>
    <style type="text/css" media="screen">
    <!--
        BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
        H1 { margin-bottom: 2px; font-family: Garamond, "Times New Roman", Times, Serif;}
        DIV.container { margin: auto; width: 90%; margin-bottom: 10px;}
        TEXTAREA { width: 80%;}
        FIELDSET { border: 1px solid #ccc; padding: 1em; margin: 0; }
        LEGEND { color: #ccc; font-size: 120%; }
        INPUT, TEXTAREA { font-family: Arial, verdana; font-size: 125%; padding: 7px; border: 1px solid #999; }
        LABEL { display: block; margin-top: 10px; } 
        IMG { margin: 5px; }
            UL.tabNavigation {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        UL.tabNavigation LI {
            display: inline;
        }

        UL.tabNavigation LI A {
            padding: 3px 5px;
            background-color: #ccc;
            color: #000;
            text-decoration: none;
        }

        UL.tabNavigation LI A.selected,
        UL.tabNavigation LI A:hover {
            background-color: #333;
            color: #fff;
            padding-top: 7px;
        }

        UL.tabNavigation LI A:focus {
            outline: 0;
        }

        div.tabs > div {
            padding: 5px;
            margin-top: 3px;
            border: 5px solid #333;
        }

        div.tabs > div h2 {
            margin-top: 0;
        }

        .content { width:40%;}
        }
    -->
    </style>

    <script src="jquery152.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
  $(document).ready(function() 
        {
            var tabContainers = $('div.tabs > div');
            tabContainers.hide();

            $('div.tabs ul.tabNavigation a').mouseover(function () 
                {
                    tabContainers.hide();
                    tabContainers.filter(this.hash).show();
                    $('div.tabs ul.tabNavigation a').removeClass('selected');
                    $(this).addClass('selected');
                    return false;
                })

            $('.content').mouseleave(function () 
                {
                    tabContainers.hide();
                    $('div.tabs ul.tabNavigation a').removeClass('selected');
                    return false;
                })  

        });
    </script>

</head>
<body id="page">
<BR>
<HR>
<BR>
    <div class="tabs">
        <ul class="tabNavigation">
            <li><a href="#first">Get Involved</a></li>
            <li><a href="#second">Services</a></li>
            <li><a href="#third">Other Stuff</a></li>
        </ul>

        <div id="first" class="content">
            <h2>First</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div id="second" class="content">

            <h2>Second</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        </div>
        <div id="third" class="content">
            <h2>Third</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
  </body>

</html>

上面的代码在某些情况下工作得很好。当鼠标悬停在锚点上时，选项卡会按预期显示，但是，当将鼠标移离“内容”div 时，只有当鼠标向下移离 div 或向右移动时，“内容”div 才会隐藏。

当鼠标也向上移动时，我必须做什么才能使其工作？

谢谢，

原文

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Tabs</title>
    <style type="text/css" media="screen">
    <!--
        BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
        H1 { margin-bottom: 2px; font-family: Garamond, "Times New Roman", Times, Serif;}
        DIV.container { margin: auto; width: 90%; margin-bottom: 10px;}
        TEXTAREA { width: 80%;}
        FIELDSET { border: 1px solid #ccc; padding: 1em; margin: 0; }
        LEGEND { color: #ccc; font-size: 120%; }
        INPUT, TEXTAREA { font-family: Arial, verdana; font-size: 125%; padding: 7px; border: 1px solid #999; }
        LABEL { display: block; margin-top: 10px; } 
        IMG { margin: 5px; }
            UL.tabNavigation {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        UL.tabNavigation LI {
            display: inline;
        }

        UL.tabNavigation LI A {
            padding: 3px 5px;
            background-color: #ccc;
            color: #000;
            text-decoration: none;
        }

        UL.tabNavigation LI A.selected,
        UL.tabNavigation LI A:hover {
            background-color: #333;
            color: #fff;
            padding-top: 7px;
        }

        UL.tabNavigation LI A:focus {
            outline: 0;
        }

        div.tabs > div {
            padding: 5px;
            margin-top: 3px;
            border: 5px solid #333;
        }

        div.tabs > div h2 {
            margin-top: 0;
        }

        .content { width:40%;}
        }
    -->
    </style>

    <script src="jquery152.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
  $(document).ready(function() 
        {
            var tabContainers = $('div.tabs > div');
            tabContainers.hide();

            $('div.tabs ul.tabNavigation a').mouseover(function () 
                {
                    tabContainers.hide();
                    tabContainers.filter(this.hash).show();
                    $('div.tabs ul.tabNavigation a').removeClass('selected');
                    $(this).addClass('selected');
                    return false;
                })

            $('.content').mouseleave(function () 
                {
                    tabContainers.hide();
                    $('div.tabs ul.tabNavigation a').removeClass('selected');
                    return false;
                })  

        });
    </script>

</head>
<body id="page">
<BR>
<HR>
<BR>
    <div class="tabs">
        <ul class="tabNavigation">
            <li><a href="#first">Get Involved</a></li>
            <li><a href="#second">Services</a></li>
            <li><a href="#third">Other Stuff</a></li>
        </ul>

        <div id="first" class="content">
            <h2>First</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div id="second" class="content">

            <h2>Second</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        </div>
        <div id="third" class="content">
            <h2>Third</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
  </body>

</html>

The above code works just fine in certain circumstances. The tabs show up as they should when mouseover the anchors but, when moving the mouse off the 'content' div then the 'content' div only gets hidden if the mouse moves downwards off the div or over to the right.

What do I have to do to make it work when the mouse is moved upwards too?

Thanks,

分享到QQ

分享到微博

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

发布评论

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

趁年轻赶紧闹 2025-01-03 20:45:02

我不知道如何使用现有标记解决您的问题，但我确实知道为什么会出现该错误。当您将鼠标移出窗口顶部时，内容实际上确实消失。问题是它会立即重新显示，因为选项卡就在那里。由于您正在监视内容区域上的 mouseleave 事件，因此随后将鼠标移至选项卡上方不会重新隐藏它。您现有的标记不允许您以另一种优雅的方式处理此问题。我会重组您的 html，以便选项卡和内容的容器位于单个元素中。然后监视该元素的 mouseleave 事件。

来，试试这个。 http://jsfiddle.net/wdeZx/

我用 class container< 围绕您的内容创建了一个容器/代码>。然后我将其添加到 mouseleave 事件跟踪中。

回复收藏 0 原文

~没有更多了~