jQuery

Question

我有一个关于 .hover() 状态的问题。我有一个导航容器 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 */
});

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 的设计是让每个函数 returns 都是原来的 jQuery 对象，所以你可以从原来的 $() 调用继续你的一系列函数。 （例如 $('#content').hide(); $('#content').html(''); 变成 $('#content').hide().html('');。） 这实际上不是 jQuery 独有的，this SO answer 有很好的说明方式行为。
我正在使用事件委托，这样就不必重新实例化事件侦听器，因为事件将“bubbling up” DOM 发送到始终可用的主体.

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

当您的鼠标悬停在子菜单上时，它会取消计时器以删除子菜单。这样做的重点是，您不会不小心将鼠标移出并隐藏子菜单。

如果您需要任何进一步的解释，请告诉我！

jQuery - .hover > popup div 也允许悬停

jQuery - .hover > popup div and allow to be hovered too

javascript

mouseover

hover

JsFiddle available here.