How can I show a div only when hovering a menu item or the div?

Question

I have items contained in an unordered list. I have hidden divs (using display:none;) outside of this list. When you hover over a list item, I would like the div to appear. It must also remain visible if you move your mouse from the list item to the div below it.

I am open to accomplish this through CSS, JavaScript/jQuery. Also, my document is set to HTML5.

This is what I am currently working with.

<nav id="main-menu">
        <ul>
            <li><a class="first-link parent" href="">First Link</a></li>
            <li><a class="second-link parent" href="">Second Link</a></li>
            <li><a class="third-link parent" href="">Third Link</a></li>
            <li><a class="fourth-link parent" href="">Fourth Link</a></li>
        </ul>
    </nav><!-- #main-menu !-->

And beneath the nav, I have the content that I would like to display when hovering over the corresponding item.

        <div id="first-widget" class="widget-container">
            <h2>Sub Title</h2>              
            <p>Lorem Ipsum
            <a href="#">Read More</a></p>

        </div><!-- .first-widget !-->


<div id="second-widget" class="widget-container">
            <h2>Sub Title</h2>              
            <p>Lorem Ipsum
            <a href="#">Read More</a></p>

        </div><!-- .second-widget !-->

<div id="third-widget" class="widget-container">
            <h2>Sub Title</h2>              
            <p>Lorem Ipsum
            <a href="#">Read More</a></p>

        </div><!-- .third-widget !-->



<div id="fourth-widget" class="widget-container">
            <h2>Sub Title</h2>              
            <p>Lorem Ipsum
            <a href="#">Read More</a></p>

        </div><!-- .fourth-widget !-->

    </aside><!-- .hidden !-->

I feel like there should be an easy solution to this, but my attempts so far have fallen short. The biggest problem is having the div show not only when hovering the menu item, but also when you move from the menu to the visible div.

Any advice is appreciate, thank you for taking the time to read this far.

Answer 1

You can wrap the widgets in a div and attach a mouseleave event to it. This solution also uses the rel attibute to store the widget id: DEMO

HTML

<div id="wrap">
    <nav id="main-menu">
        <ul>
            <li><a class="first-link parent" rel="first-widget" href="">First Link</a></li>
            <li><a class="second-link parent" rel="second-widget" href="">Second Link</a></li>
            <li><a class="third-link parent" rel="third-widget" href="">Third Link</a></li>
            <li><a class="fourth-link parent" rel="fourth-widget" href="">Fourth Link</a></li>
        </ul>
    </nav><!-- #main-menu !-->

    <div id="first-widget" class="widget-container">
                <h2>Sub Title 1</h2>              
                <p>Lorem Ipsum
                <a href="#">Read More</a></p>
     </div><!-- .first-widget !-->
      ...
</div>

JS

$('#main-menu a').mouseover(function() {
   var $this = $(this);
   var id = $this.attr('rel');
   var $currentWidget = $('#' + id);
   $currentWidget.show().siblings('.widget-container').hide();
});
$('#wrap').mouseleave(function() {
    $('.widget-container').hide();
});

Answer 2

Something like this should work.

Using .hover to bind the event, .index and .eq to find which one to show/hide and the native JS methods for timeouts to let you hover the divs.

var timeout; // store a timeout here

$('#main-menu lia ').hover(function ()
{
    $('.widget-container').eq($(this).parent().index()).show();
}, function ()
{
    timeout = setTimeout(function ()
    {
        $('.widget-container').eq($(this).parent().index()).hide();
    }, 1000);
);

$('.widget-container').hover(function ()
{
    clearTimeout(timeout);
}, function ()
{
    timeout = setTimeout(function ()
    {
        $(this).hide();
    }, 1000);
});