Javascript jQuery-.hover>弹出div并允许悬停

我有一个关于悬停状态的问题。我有一个导航容器id='search'，另一个容器名为content id='content'，设置为隐藏

当我将鼠标悬停在标题上时，内容容器会显示其中的链接。 但问题是，当我将鼠标悬停在jQuery上时，是否可以告诉它不要隐藏内容？基本上，我将鼠标悬停在标题>内容显示>上，这样我就可以单击链接，一旦我用鼠标离开标题或内容，内容就会消失。。这可能吗/

这是我的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 */
});

---

好的，所以您需要做一些更改：

HTML

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

您已经有了一个div.navigation元素，所以我添加了一个名为divnav的新元素：

JS

我已经彻底改变了Javascript。以下是我的更改摘要：

我将两个var实例都添加到了顶部，用于组织。 我已将所有事件更改为.on事件。查看文档。 我做的另一个组织变革是将许多职能联系在一起。JQuery的设计使每个函数都返回原始JQuery对象，因此您可以从原始$call继续执行一系列函数。e、 g.$'content'.hide；$'内容“.html；变成$'content.hide.html；。这实际上并不是jQuery独有的，并且有一个很好的方法来说明这种行为。 我使用事件委派，这样事件监听器就不必重新实例化，因为事件将是DOM，并且始终可用。 这个想法是浏览器正在等待你的鼠标在指定的菜单项搜索和新闻。当您将鼠标从同时包含菜单和子菜单的nav对象中取出时，浏览器将在删除子菜单之前等待几秒钟

当鼠标位于子菜单上方时，它将删除计时器以删除子菜单。这一点是，您不会意外地将鼠标取出并隐藏子菜单

如果你需要进一步的解释，请告诉我

---

你能提供一个www.jsfiddle.net的例子吗？我很想，但不知怎么的，它不起作用。对不起@马丁：我终于把它上传到了JSFIDLE，但是JS不起作用了。。。在左上角，您可以选择您的库。看看：@Martin:好的，现在开始工作了，谢谢你：*哦，我的上帝，非常感谢你！你应该为此获得一枚奖章：DA奖章，因为你花了这么长时间才回答？我不这么认为：不管你花了多少时间才回答，我的意思是只要看看你的答案，有条理，有条理，写得好。如果没有你，我是不会找到解决办法的——因此我感谢你的帮助和努力，谢谢你，马丁！：3.

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

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