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

Question

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

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

Answer 1

我创建了一个 working example 。基本上，您需要创建 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
                    }
                );
            }
        );
    }
);