Как показать элемент при наведении курсора, который не содержится в текущих братьях и сестрах, а затем скрыть его при наведении курсора мыши на ИЛИ на другой элемент?

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>

Изменен код Top 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();
    })
});

Основная идея заключается в том, что если вы наведите курсор мыши на элемент hovered на элемент div, код скрытия не произойдет, а если вы наведите курсор мыши на элемент div, элемент div будет скрыт.