Спрятать div на зависании вне div

Question

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

У меня есть небольшой div внутри большого div с контейнером id. Я хочу скрыть div с id анимацией, если кто-то наведет верхнюю часть маленького div. он должен оставаться открытым, когда мышь находится над маленьким div.

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

Try:

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

Docs http://api.jquery.com/mouseenter/

HTML:

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

Fiddle: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 сначала предотвратит это.