javascript - 在 div 外悬停时隐藏 div

Question

<div id='container'>
    <div id="animate"></div>
</div>

我在一个带有 id container 的大 div 里面有一个小 div。如果有人悬停在小 div 的外侧，我想用 id animate 隐藏 div。当鼠标悬停在小 div 上时，它应该保持打开状态。

Answer 1

这应该这样做

$('#small').hover(function () {
    $('#animate').show();
}, function () {
    $('#animate').hide();
});

Answer 2

尝试：

CSS：

#container{width:100px;height:100px;background:#F00;}
#animate{width:50px;height:50px;background:#0F0;}

脚本：

$(function(){
    $('#container').mouseenter(function(){
        $('#animate').fadeTo(1000,0)
                     .mouseenter(function(){$(this).fadeTo(1000,1)});
    }); // use 750 in place of 1000 to animate it fast
});

文档http://api.jquery.com/mouseenter/

HTML：

<div id='container'>
    <div id="animate">&nbsp;</div>
</div>

小提琴：http: //jsfiddle.net/aZmfz/4/

Answer 3

HTML：

<div id='container'>
    <div id="animate">HI!</div>
</div>

CSS：

#container{
    width: 100px;
    height: 200px;
    background-color: black; 
}
#animate{
    height: 50px;
    width: 100px;
    background-color: white;
    opacity: 0;
}

jQuery：

$("#animate").hover(
    function(){
        $(this).stop().animate({
            opacity: 1
        }, 1000);
    },
    function(){
        $(this).stop().animate({
            opacity: 0
        }, 1000);
    }
);

例子

您可能不想进行严格的显示/隐藏，因为元素在隐藏时将没有高度/宽度可以悬停。相反，您可能更愿意将不透明度设置为 0（隐藏）或 1（显示），并让动画函数在两者之间转换。您还会注意到我使用了.stop()函数。这是因为如果您在元素上来回悬停，它将继续调用排队的动画。首先调用停止将防止这种情况发生。

Answer 4

你可以用纯 CSS 实现同样的效果：

#animate {
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

#container:hover #animate {
    opacity: 0;
}

#container #animate:hover {
    opacity: 1;
}

演示：http: //jsfiddle.net/gXz2A/