5

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

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

当我将鼠标悬停在下面的列表项上时，我想要一个我指定的 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”的使用以及单数“幻灯片”术语是如何发挥作用的。

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

4

1 回答 1

4

基本上，您应该将弹出窗口嵌套在触发它的元素中，然后使用: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;
}

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

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

于 2011-02-17T11:24:09.227 回答