如何仅在悬停菜单项或div时显示div?

时间:2012-02-12 00:02:02

标签: jquery html css onmouseover onmouseout

我的商品包含在无序列表中。我在此列表之外隐藏了div(使用display:none;)。当您将鼠标悬停在列表项上时,我希望显示div。如果将鼠标从列表项移动到它下面的div,它也必须保持可见。

我愿意通过CSS,JavaScript / jQuery实现这一目标。此外,我的文档设置为HTML5。

这就是我目前正在使用的。

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

在导航栏下方,我有悬停在相应项目上时要显示的内容。     

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

我觉得应该有一个简单的解决方案,但到目前为止我的尝试都没有达成。最大的问题是不仅在悬停菜单项时,而且在从菜单移动到可见div时显示div。

任何建议都表示赞赏,感谢您花时间阅读这篇文章。

2 个答案:

答案 0 :(得分:4)

您可以将小部件包装在div中并附加mouseleave个事件。此解决方案还使用rel attibute来存储窗口小部件idDEMO

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();
});

答案 1 :(得分:2)

这样的事情应该有效。

使用.hover绑定事件.index.eq以查找要显示/隐藏的事件以及用于超时的本机JS方法,以便让您将鼠标悬停。

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);
});