隐藏div上悬停的div

Question

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

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

Answer 1

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

Answer 2

这应该这样做

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

Answer 3

尝试：

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 4

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