如何使用jQuery使DIV跳出响应悬停事件(如国家地理站点)？

我有一个问题类似于here提出的问题,但情况有所不同.

我正在寻找的功能几乎与National Geographic website相同,其中当悬停在其中一个主链接上时出现“偷看”,并在与其交互时保持可见,或悬停在子菜单上,但在不悬停时消失菜单项,子链接或“偷看”.

当我将鼠标悬停在下面的列表项上时,我想要一个我指定的DIV(在这种情况下通过数字对应 – 但如果数字不存在或者不匹配,我希望能够灵活地单独定义div名称[我正在使用Drupal,一切都是动态生成的])在它下面滑出或者只是出现(列表将是内联的).它需要保持打开状态,以便人们可以单击DIV中显示的链接,但是当您从DIV或列表项中鼠标输出时,div需要消失.

我的HTML看起来更像是这样的：


我的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的新手,并且已经完成了这个项目的任务.我感谢任何帮助,我希望其他人也能发现它有用！


最佳答案
基本上,您应该将弹出窗口嵌套在触发它的元素中,然后使用：hover pseudo-class来显示它.如果你需要在IE6中使用它,你必须附加一些解决方法脚本：hover模拟,但这很容易在网上找到.如果需要转换,请使用具有相同标记的鼠标事件.
示例：http://jsfiddle.net/YNSVj/1/
这是标记：


这是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;
}

请注意,您必须为菜单项设置显式高度,然后使用弹出块的上边距值进行播放,以便在用户更改字体大小时不会被撕掉.
另外,请记住,这是最简单的解决方案,在某些情况下可能不适用.

如何使用jQuery使DIV跳出响应悬停事件(如国家地理站点)？

猜你在找的jQuery相关文章