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

Question

我遇到了与此处提出的问题类似的问题，但情况略有不同。

---

我正在寻找的功能几乎与国家地理网站相同，其中出现“先睹为快”当将鼠标悬停在主链接之一上时，并在与其交互时保持可见，或将鼠标悬停在子菜单上，但在未将鼠标悬停在菜单项、子链接或“先睹为快”上时消失。

---

当我将鼠标悬停在下面的列表项上时，我想要一个指定的 DIV（在本例中按数字对应 - 但如果数字不存在或不匹配，我希望能够灵活地单独定义 div 名称[我正在使用 Drupal，所有内容都是动态生成的]）滑出或仅出现在其下方（列表将内联）。它需要保持打开状态，以便人们可以单击 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>

我的 CSS 看起来像这样：

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

我的 jQuery （基于 Carl Meyer 对另一个线程的回答，我确信我已经搞砸了）看起来像这样：

$(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 很陌生，并且负责这个项目。我感谢任何帮助，我希望其他人也能发现它很有用！

Answer 1

基本上，您应该将弹出窗口嵌套在触发它的元素内，然后使用 :hover 伪类来显示它。如果您需要它在 IE6 中工作，您必须附加一些用于 :hover 模拟的解决方法脚本，但这在网上很容易找到。如果需要转换，请使用具有相同标记的鼠标事件。

示例如下： http://jsfiddle.net/YNSVj/1/

是标记：

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

这 是 CSS：

.item{
    float: left;
    background: #ffc;
    height: 2em;
    padding: 5px 15px 0;
    border: 1px solid #000;
}

.popup
    {
        display: none;
        position: absolute;
        left: 0;
        top: 2em;
        width: 100%;
        margin-top: 17px; /* To compensate for parent block's padding */
        color: #fff;
        background: #f00;
    }

.item:hover .popup
{
    display: block;
}

请注意，您必须为菜单项设置明确的高度，然后使用弹出块的顶部边距值，这样如果用户更改字体大小，它就不会被撕掉。

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