隐藏div上悬停的div

问题描述：

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

我有一个带有id容器的大div的小div。如果有人在小格子的外侧悬停，我想隐藏带id的动画。它应该保持打开时，鼠标是在小格子。隐藏div上悬停的div

是'animate'默认隐藏？ – dfsq 2013-03-13 12:20:00

我认为'小div'是#animate div吗？ – 2013-03-13 12:25:24

StackOverflow不是这个问题的适当位置。我们不会为您编写代码。你需要做自己的编码，如果你不确定为什么某些东西不能按预期工作，请在代码中加上一个解释你期望它做什么，以及它实际上在做什么，包括所有的错误信息。参见[关于StackOverflow]（http://stackoverflow.com/about）。 – 2013-03-13 12:45:19

答

可以实现纯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/

答

这应该这样做

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

答

尝试：

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/

（引用OP：）*当鼠标在小格子上时它应该保持打开。* – 2013-03-13 12:27:31

答

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将防止这种情况。

隐藏div上悬停的div

相关推荐