Question

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

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

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

Answer 2

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

Answer 3

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

1）拥有像DIV或UL LI这样的3个块并在里面添加隐藏容器（或者如果你用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事件，因此可以很好地显示它。

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

3 个答案: