Question

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

我在一个带有id容器的大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);
    }
);

EXAMPLE

您可能不想要严格执行show / hide，因为该元素将无高度/宽度悬停在<强>什么时候隐藏。相反，您可能更喜欢将不透明度设置为0（隐藏）或1（显示），并让animate函数在两者之间转换。您还会注意到我使用了.stop()函数。这是因为如果您hover在元素上来回移动，它将继续调用排队的动画。首先调用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/

在div外面悬停隐藏div

4 个答案: