使用jQuery悬停在div上时如何显示覆盖div？答案

【问题标题】：How to show an overlay div when hover on a div with jQuery?使用jQuery悬停在div上时如何显示覆盖div？
【发布时间】：2011-10-25 04:21:30
【问题描述】：

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

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

【问题讨论】：

标签： jquery hover overlay

【解决方案1】：

我创建了一个working example。基本上你需要创建 3 个具有可见和不可见容器的 div，添加 hover 事件处理程序并在该处理程序中切换 tooltip 的 可见性。

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

【讨论】：

+1 不知道 animate 中的切换 :) 代码也非常漂亮和干净！
谢谢，我发现这比通常的 jQuery 格式更具可读性。
工具提示框并不位于框的顶部
这只是样式或样式微调的问题，它向您展示了做出这种行为所需的逻辑。我想让它尽可能简单，让更多人能够理解。弄清楚后，根据需要设置样式...

【解决方案2】：

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

【讨论】：

【解决方案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 事件，因此它会很好地显示。

【讨论】：