如何在使用jQuery悬停在div上时显示覆盖div？ [英] How to show an overlay div when hover on a div with jQuery?

问题描述

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

请查看页脚附近的3个框。

解决方案

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

HTML：

 < div class =parents> 
< div class =box type-1>方块1< / div> 
< div class =tooltip type-1> tooltip 1< / div> 
< / div> 
 
< div class =parents> 
< div class =box type-2>方框2< / div> 
< div class =tooltip type-2> tooltip 2< / div> 
< / div> 
 
< div class =parents> 
< div class =box type-3>方块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; 
 
背景颜色：＃666; 
颜色：#fff; 
 border：1px solid＃222; 
 text-align：center; 
} 
 
 .tooltip 
 {
 display：none; 
位置：绝对; 
 top：50px; 
 
  

jQuery代码：

<

$ b $（




$ add $ h
$（$） '.box'）。hover
（
function（）
{
//找到触发方块父级，它是tooltip child
$（this）.parent （）.children（'。tooltip'）。animate
（
{
opacity：toggle，// toggle opacity
}
）;
}
）;
}
）;

I want to show an overlay div sitting on top of the hovered div similar to this effect on IBM website: http://www.ibm.com/us/en/

Please look at the 3 boxes near the footer. Hover on the box "Let's build a smarter planet" to view the effect.

解决方案

I've created a working example. Basically you need to create 3 divs with a visible and the invisible containers, add hover event handler and toggle the tooltip's visibility in that handler.

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 code:

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

这篇关于如何在使用jQuery悬停在div上时显示覆盖div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！