如何使用 jQuery 将鼠标悬停在 div 上时显示覆盖 div？

Question

我想在悬停的 div 顶部显示一个覆盖 div，类似于 IBM 网站上的此效果： http: //www.ibm.com/us/en/

请查看页脚附近的 3 个框。将鼠标悬停在“让我们建设一个更智能的星球”框上即可查看效果。

Answer 1

我创建了一个工作示例。基本上，您需要创建 3 个带有可见和不可见容器的 div，添加悬停事件处理程序并在该处理程序中切换工具提示的可见性。

HTML:

<div class="parents">
    <div class="box type-1">box 1</div>
    <div class="tooltip type-1">tooltip 1</div>
</div>

<div class="parents">
    <div class="box type-2">box 2</div>
    <div class="tooltip type-2">tooltip 2</div>
</div>

<div class="parents">
    <div class="box type-3">box 3</div>
    <div class="tooltip type-3">tooltip 3</div>
</div>

CSS:

.parents
{
    float: left;
    margin: 5px;
}

.box,
.tooltip
{
    width: 80px;
    height: 30px;
    line-height: 30px;

    background-color: #666;
    color: #fff;
    border: 1px solid #222;
    text-align: center;
}

.tooltip
{
    display: none;
    position: absolute;
    top: 50px;
}

jQuery 代码:

$(document).ready
(
    function ()
    {
        // add hover event handler
        $('.box').hover
        (
            function ()
            {
                // find the triggering box parent, and it's tooltip child
                $(this).parent().children('.tooltip').animate
                (
                    {
                        opacity: "toggle",      // toggle opacity
                    }
                );
            }
        );
    }
);

Answer 2

IBM 正在使用Dojo 的.expand 方法。您可以使用 expand 插件在 jQuery 中执行相同的功能。

Answer 3

您可以轻松做到这一点。步骤应遵循：

1) 有 3 个块，例如 DIV 或 UL LI，并在其中添加隐藏容器（或者如果您使用 jQuery 设置位置也没关系。
如果您的结构是：

<div class="block">
<div class="invisible"></div>
<div class="visible"></div>
</div>

2) 将 mouseenter 和 mouseleave 事件附加到所有 3 个块，例如：

$('.block').mouseenter(function() {
// some code to show the hidden container

$(this).find('.visible').show().addClass('visible_container');

});

$('.block').mouseleave(function() {
// some other code to hide the shown container
$('.visible_container').hide(); // Hide all the instances of .visible_container
});

3) 您应该根据元素的位置方法修改 JS 或 CSS，以便当调用 show() 时，该元素将显示在该元素的正上方。例如，如果您的隐藏块具有 CSS 规则 position:absolute，您将使用：

$(this).find('.visible')
       .show()
       .addClass('visible_container')
       .css('top', $(this).offset().top+'px')
       .css('left', $(this).offset().left+'px');

在这种情况下，显示的容器将调整到悬停块的右上角。

由于隐藏容器是块容器的子容器 - 不会调用 mouseleave 事件，因此它会保持良好的显示状态。