JsFiddle available here.

Question

我对.hover（）状态有疑问。我有一个导航容器ID =＆＃39;搜索＆＃39;以及另一个名为content（id =＆＃39; content＆＃39;）的容器，它被设置为隐藏。

当我将鼠标悬停在标题上时，内容容器会显示其中的链接。但问题是，当我将鼠标悬停在它上面时，是否有可能告诉jQuery不要隐藏内容？基本上，我将鼠标悬停在标题之上＆gt;内容显示＆gt;所以我可以点击链接，一旦我用标题留下标题或内容，内容就会消失。这可能吗？ ; /

这是我的HTML代码。

<div class='navigation'>
        <ul>
            <li class='headline' id='search'>Search</li>
            <li class='headline' id='news'>News</li>
            <li class='headline' id='media'>Media</li>
            <li class='headline' id='miscellaneous'>Miscellaneous</li>
        </ul>

        <div id='content'>Hover over a headline to show its content.</div>
</div>

和JavaScript / jQuery

$('#content').hide(); /* Hide content container */
var contentSearch = '<ul>' +
                        '<li><img src=\'images/icons/youtube.png\' class=\'icon\'><a class=\'link\' href=\"#\">DuckDuckGo</a></li>' +
                        '<li><img src=\'images/icons/youtube.png\' class=\'icon\'><a class=\'link\' href=\"#\">Google</a></li>' +
                    '</ul>';
$('#search').hover(function () { /* Headline is hovered upon */
    var pos = $(this).position(); /* Get the position of the headline container relative to its parent */
    var headlineWdth = $(this).width(); /* Get the width of the headline container */
    $('#content').html(contentSearch); /* Content container gets its content filled in */
    var contentWdth = $('#content').width(); /* Get the width of the content container */
    var contentWdthRemaining = contentWdth - headlineWdth; /* Content width minus headline width equals the remaining width of the content container */
    var posSubtract = contentWdthRemaining / 2; /* Remaining content container width will be divided by 2, that way it can be later subtracted from the offset position
    in order for us to place the content container directly bellow the headline */
    $('#content').css({'left': pos.left - posSubtract}); /* Place content container right bellow the headline */
    $('#content').slideDown('fast'); /* Show content container with a fast slide down animation */
}, function () { /* The headline is not hovered upon anymore */
    $('#content').hide(); /* immediately hide the content container */
    $('#content').html(''); /* Clear previous html input so it won't be seen in the page inspector tool */
});

Answer 1

好的，所以你需要做一些改变：

<强> HTML

您应该将导航包装在一个元素中，该元素命名用于导航的整个块 - 这将包括主菜单和子菜单。

您已经有一个div.navigation元素，因此我添加了一个名为div#nav的新元素：

<div class='navigation'>
    <div id="nav">
        <ul>
            <li class='headline' id='search'>Search</li>
            <li class='headline' id='news'>News</li>
            <li class='headline' id='media'>Media</li>
            <li class='headline' id='miscellaneous'>Miscellaneous</li>
        </ul>
        <div id='content'>Hover over a headline to show its content.</div>
    </div>
</div>

<强> CSS

此处没有太多变化，我所做的唯一更改是将以下规则从.navigation > ul更改为#nav > ul：

#nav > ul {
    margin: 0px;
    padding: 0px;
    text-align: center;
}

<强> JS

我彻底改变了Javascript (as you can see by this diff comparison)。这是我的变化的概要：

我将两个var实例添加到顶部，用于组织。
我已将所有事件更改为.on()个事件。查看文档here。
我做的另一个组织变革是将许多功能链接在一起。 JQuery的设计使每个函数都返回原始的jQuery对象，因此您可以继续原始$()调用中的一系列函数。 （例如$('#content').hide(); $('#content').html('');变为$('#content').hide().html('');。）这实际上并不是jQuery独有的，this SO answer有一种很好的方式来说明这种行为。
我使用事件委托，以便事件监听器不必重新实例化，因为事件将是＆＃34; bubbling up＆＃34; DOM，身体始终可用。

这个想法是浏览器正在等待鼠标超过指定的菜单项（#search和#news）。当您将鼠标移出#nav对象（同时包含菜单和子菜单）时，您的浏览器将在移除子菜单之前等待几分之一秒。

当鼠标位于子菜单上时，它会删除定时器以删除子菜单。关键是你不会意外地将鼠标移出并意外隐藏子菜单。

如果您需要进一步解释，请与我们联系！

jQuery - .hover＆gt; popup div也允许徘徊

1 个答案:

JsFiddle available here.