如何在悬停时显示不包含在当前同级元素中的元素，然后在将鼠标移出或悬停在另一个元素上时隐藏它？

Question

我有一个使用 wp_nav_menu 的链接列表，因此客户端可以轻松编辑它们。这些输出一种菜单。除此之外，我还有一组直接与这些列表项相关的自定义帖子。我希望当我将鼠标悬停在列表项上时显示与菜单项相关的信息，但如果我还单击其中的链接则保持可见。

下面是我当前正在使用的代码，该代码可以工作，但项目会定期显示。还有其他人尝试过实现这一目标吗？

$('#nav > li').each(function(){
    var first = $(this).attr('class').replace(/^(\S*).*/, '$1')

    $(this).hover(function(){
        $('.programs').show(100);
        $('.program_home').addClass('visuallyhidden');
        $('#' + first).toggleClass('visuallyhidden');
    }, function() {
        $('#' + first).mouseout(function(){
            $(this).addClass('visuallyhidden');
            $('.programs').hide();
        });
    });
});

另外，我的页面代码如下所示：

<section class="switcher">
    <nav class="grid_3">
        <ul id="nav" class="menu">
            <li id="menu-item-4512" class="busprof menu-item menu-item-type-post_type menu-item-object-page"><a href="http://scs.cmsstaging.utoronto.ca/courses-programs/business-professionals/"><strong>Business Professionals</strong><span class="desc">Courses &amp; Certificates for Business and Engineering professionals</span><span class="arrow"></span></a></li>
            <li id="menu-item-4516" class="creative_writing menu-item menu-item-type-post_type menu-item-object-page"><a href="http://scs.cmsstaging.utoronto.ca/courses-programs/creative-writing/"><strong>Creative Writing</strong><span class="desc"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec </span><span class="arrow"></span></a></li>
            <li id="menu-item-4528" class="languages menu-item menu-item-type-post_type menu-item-object-page"><a href="http://scs.cmsstaging.utoronto.ca/courses-programs/languages-translation/"><strong>Languages &#038; Translation</strong><span class="desc"> </span><span class="arrow"></span></a></li>
            <li id="menu-item-4527" class="arts_science menu-item menu-item-type-post_type menu-item-object-page"><a href="http://scs.cmsstaging.utoronto.ca/courses-programs/arts-science/"><strong>Arts &#038; Science</strong><span class="desc"> </span><span class="arrow"></span></a></li>
            <li id="menu-item-4526" class="elp menu-item menu-item-type-post_type menu-item-object-page"><a href="http://scs.cmsstaging.utoronto.ca/courses-programs/english-language-program/"><strong>English Language Program</strong><span class="desc"> </span><span class="arrow"></span></a></li>
            <li id="menu-item-4525" class="online menu-item menu-item-type-post_type menu-item-object-page"><a href="http://scs.cmsstaging.utoronto.ca/courses-programs/online-distance-learning/"><strong>Online &#038; Distance Learning</strong><span class="desc"> </span><span class="arrow"></span></a></li>
    </ul>
</nav>
<div class="programs">
    <dl id="online" class="visuallyhidden program_home">
        <dd>Defenition</dd>
            <dt class="classes">Definition Title</dt>
            <dd>
                <ul>
                    <li><a href="#">Link</a></li>
                </ul>
            </dd>
            <dd>
                <blockquote>excerpt</blockquote>
            </dd>
            <dt class="learn_more"><span>Learn</span> more.</dt>
        </dl>
        <dl id="elp" class="visuallyhidden program_home">
            <dd>Defenition</dd>
            <dt class="classes">Definition Title</dt>
            <dd>
                <ul> 
                    <li><a href="#">Link</a></li>
                </ul>
            </dd>
etc...
</section>

将顶级 jQuery 代码修改为：

$('#nav > li').each(function(){
    var first = $(this).attr('class').replace(/^(\S*).*/, '$1'), timer;

    $(this).hover(function(){
        clearTimeout(timer);
        $('.program_home').addClass('visuallyhidden');
        $('.programs').fadeIn(200);
        $('#' + first).removeClass('visuallyhidden');
    }, function() {
        timer = setTimeout(function(){
            $('#' + first).addClass('visuallyhidden');
            $('.programs').fadeOut(200);
        },75);
    });
    $('#' + first).hover(function(){
        clearTimeout(timer);
    },function(){
        $(this).addClass('visuallyhidden');
        $('.programs').hide();
    });
});

基于建议。它可以工作，但看起来有问题。我将改变时间和班级调整，看看是否可以改进。

Answer 1

试试这个：

$('#nav > li').each(function(){
    var first = $(this).attr('class').replace(/^(\S*).*/, '$1'), timer;

    $(this).hover(function(){
        $('.programs').show(100);
        $('.program_home').addClass('visuallyhidden');
        $('#' + first).toggleClass('visuallyhidden');
    }, function() {
        timer = setTimeout(function(){
            $('#' + first).addClass('visuallyhidden');
            $('.programs').hide();
        },10);
    });
    $('#' + first).hover(function(){
        clearTimeout(timer);
    },function(){
        $(this).addClass('visuallyhidden');
        $('.programs').hide();
    })
});

基本思想是，如果您将鼠标从悬停的元素移动到 div，则隐藏代码不会发生，如果您将鼠标移出 div，则 div 会被隐藏。