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

我有一个无序列表中包含的项目。我在此列表之外隐藏了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，而且在从菜单移动到可见div时也显示div

---

任何建议都将不胜感激，感谢您抽出时间阅读本文。

类似的内容应该会奏效

使用绑定事件，并查找要显示/隐藏的事件，以及用于超时的本机JS方法，以便悬停div

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

---

这样的办法应该行得通

使用绑定事件，并查找要显示/隐藏的事件，以及用于超时的本机JS方法，以便悬停div

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

---

您可以将小部件包装在

div

中，并向其附加

mouseleave

事件。此解决方案还使用

rel attibute

存储小部件

id

：

HTML

---

您可以将小部件包装在

div

中，并向其附加

mouseleave

事件。此解决方案还使用

rel attibute

存储小部件

id

：

HTML

---

乔，谢谢你的及时回复。我在我的页面中添加了以下内容，但是小部件没有出现<代码>$（文档）.ready（函数（）{$（'#home nav ul li a'）.hover（函数（）{$（'.widget container'）.eq（$（this.parent（）.index（））.toggle（）；}）Joe，非常感谢您抽出时间来帮助我。我现在正在尝试，并会让您知道它是如何进行的。Joe，感谢您的及时响应。我在我的页面中添加了以下内容，但小部件没有出现。

$（文档）。就绪（function（）{$（'#home nav ul li a'）。悬停（function（）{$（'.widget container'））.eq（$（this.parent（）.index（））.toggle（）；}）；}

Joe，非常感谢你抽出时间来帮助我。我现在正在尝试，并会让你知道它是如何运行的。哦，嘿，注意-我对js做了一点改进。再次，非常感谢。最后一个问题……有没有办法在我将鼠标移到.widget容器上后将初始菜单项保持在：悬停状态？@alpacalips，我们如何使它像下拉菜单一样工作，并在特定的父菜单下像子菜单一样显示div嘿，注意-我对js做了一点改进。再次，非常感谢。最后一个问题…有没有办法在我将鼠标移到.widget容器上后将初始菜单项保持在：悬停状态？@alpacalips，我们如何使我t像下拉菜单一样工作，并且在特定的父菜单下像子菜单一样显示div

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

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