如何使用jQuery使DIVs弹出以响应悬停事件（如国家地理网站）？

我有一个问题与提出的问题类似，但情况有所不同

---

我正在寻找的功能几乎与相同，当鼠标悬停在其中一个主链接上时，“偷窥”会出现，在与它交互时保持可见，或在子菜单上悬停，但在不悬停在菜单项、子链接或“偷窥”上时消失

---

当我将鼠标悬停在下面的列表项上时，我希望指定一个DIV（在本例中是通过数字对应的-但如果数字不存在或不匹配[我使用Drupal，所有内容都是动态生成的]，我希望可以灵活地单独定义DIV名称）滑出或显示在它下面（列表将是内联的）。它需要保持打开状态，以便人们可以单击显示在DIV中的链接，但当您从DIV或列表项中鼠标移出时，DIV需要消失

我的HTML看起来更像这样：

<div id="navigation">
    <ul id="switches">
      <li class="item-1">First item</li>
      <li class="item-2">Second item</li>
      <li class="item-3">Third item</li>
      <li class="item-4">Fourth item</li>
    </ul>
    <div id="block-1" class="block">
        <p>First block</p>
        <p><a href="http://www.google.com">Click here!</a></p>
    </div>
    <div id="block-2" class="block">
        <p>Second block</p>
        <p><a href="http://www.google.com">Click here!</a></p>
    </div>
    <div id="block-3" class="block">
        <p>Third block</p>
        <p><a href="http://www.google.com">Click here!</a></p>
    </div>
    <div id="block-4" class="block">
        <p>Fourth block</p>
        <p><a href="http://www.google.com">Click here!</a></p>
    </div>
</div>

#switches li {
    display: inline-block;
    height: 50px;
    background-color: #F33;
}
#block-1,
#block-2,
#block-3,
#block-4 {
    position: absolute;
    top: 50px;
    height: 300px;
    width: 500px;
    background-color: #999;
    display: none;
}
#block-1.active,
#block-2.active,
#block-3.active,
#block-4.active {
    display: block;
}

$(document).ready(function() {
    switches = $('#switches > li');
    slides = $('#navigation > div.block');
    switches.each(function(idx) {
        $(this).data('slide', slides.eq(idx));
    }).hover(
    function() {
        switches.removeClass('active');
        slides.removeClass('active');             
        $(this).addClass('active');  
        $(this).data('slide').addClass('active');
    });
});

我的jQuery（基于Carl Meyer对另一个线程的回答，我确信我已经把它搞砸了）如下所示：

<div id="navigation">
    <ul id="switches">
      <li class="item-1">First item</li>
      <li class="item-2">Second item</li>
      <li class="item-3">Third item</li>
      <li class="item-4">Fourth item</li>
    </ul>
    <div id="block-1" class="block">
        <p>First block</p>
        <p><a href="http://www.google.com">Click here!</a></p>
    </div>
    <div id="block-2" class="block">
        <p>Second block</p>
        <p><a href="http://www.google.com">Click here!</a></p>
    </div>
    <div id="block-3" class="block">
        <p>Third block</p>
        <p><a href="http://www.google.com">Click here!</a></p>
    </div>
    <div id="block-4" class="block">
        <p>Fourth block</p>
        <p><a href="http://www.google.com">Click here!</a></p>
    </div>
</div>

#switches li {
    display: inline-block;
    height: 50px;
    background-color: #F33;
}
#block-1,
#block-2,
#block-3,
#block-4 {
    position: absolute;
    top: 50px;
    height: 300px;
    width: 500px;
    background-color: #999;
    display: none;
}
#block-1.active,
#block-2.active,
#block-3.active,
#block-4.active {
    display: block;
}

$(document).ready(function() {
    switches = $('#switches > li');
    slides = $('#navigation > div.block');
    switches.each(function(idx) {
        $(this).data('slide', slides.eq(idx));
    }).hover(
    function() {
        switches.removeClass('active');
        slides.removeClass('active');             
        $(this).addClass('active');  
        $(this).data('slide').addClass('active');
    });
});

我不熟悉这段代码是如何工作的，并且一直在努力解决它，但我不确定我是否理解“idx”的用法以及单数“slide”术语是如何起作用的

---

我对jQuery非常陌生，并且一直负责这个项目。我感谢任何帮助，我希望其他人也能发现它有用！

基本上，你应该将弹出窗口嵌套在触发它的元素中，然后使用

：hover

伪类来显示它。如果你需要它在IE6中工作，你必须附加一些解决方法用于：悬停模拟的d脚本，但在网上很容易找到。如果需要转换，请使用具有相同标记的鼠标事件

示例如下：

以下是标记：

<ul class="menu">
    <li class="item"><a href="#">Link 1</a><div class="popup">This is popup number one</div></li>
    <li class="item"><a href="#">Link 2</a><div class="popup">This is popup number two. <br/> It has a line break inside.</div></li>
</ul>

请注意，您必须为菜单项设置一个明确的高度，然后使用弹出框的上边距值，这样当用户更改字体大小时，它就不会被撕掉

---

另外，请记住，这是最简单的解决方案，在某些情况下可能不适用。

感谢pyrorex1，因为它捕捉到了代码错误！感谢向上投票！我以前从未使用过stackoverflow，投票模块非常有助于找到最有用的信息！我只想感谢您和stackoverflow我看到我对可能的付款的引用被删除了。我在常见问题解答中找不到任何关于这是否合适的内容，所以我把它包括了进去。我已经注意到了，不会再包括了。非常感谢！我对这一点印象深刻是一个论坛，我真的很期待成为一个更积极的成员。我已经找到了解决问题的方法，很快就会发布详细信息。不管怎么说，我对国家地理网站的链接不太感兴趣。它在显示你悬停的链接的具体内容之前，会简要地显示主要图片，有点闪烁。