jQuery - наведение мыши / мышка с несколькими делениями

Question

У меня есть скрытый div, вложенный в больший div, и я настроил его так, чтобы при наведении мыши на больший div, скрытый div скользил вниз. При наведении мыши div скользит назад. Проблема в том, что, когда мышь перемещается по меньшему элементу div, она пытается сдвинуть его назад, потому что было вызвано событие mouseout. Как я могу предотвратить повторное скрытие div, пока мышь не окажется над ни одним div?

HTML:

<div id="topbarVis" class="col1 spanall height1 wrapper">
    <div id="topbar"></div>
</div>

(дополнительные классы являются частью модульной системы CSS и определяют ширину и высоту, среди прочего, # topbarVis

CSS:

#topbar {
  width: 100%;
  height: 30px;
  margin-top: -25px;
  background-color: #000;
} 

ЯШ:

// On Mouseover -> Show
$("#topbarVis").mouseover(function(){
  $("#topbar").animate({marginTop:0}, 300);
});
// On Mouseout -> Hide
$("#topbarVis").mouseout(function(){
  $("#topbar").animate({marginTop:-25}, 300);
});

Answer 1

Используйте mouseenter/mouseleave вместо:

$("#topbarVis").mouseenter(function(){
  $("#topbar").animate({marginTop:0}, 300);
})
 .mouseleave(function(){
  $("#topbar").animate({marginTop:-25}, 300);
});

... или просто используйте hover() ^{(документы)} методчто является сокращением для mouseenter/mouseleave:

$("#topbarVis").hover(function(){
  $("#topbar").animate({marginTop:0}, 300);
},function(){
  $("#topbar").animate({marginTop:-25}, 300);
});

Причина в том, что природа mouseover/mouseout такова, что она пузырится.Так что он сработает, когда какие-либо потомки элемента получат события.Принимая во внимание, что mouseenter/mouseleave не всплывает.

Единственный браузер, который на самом деле поддерживает нестандартные события mouseenter/mouseleave, - это IE, но jQuery повторяет его поведение.

Answer 2

Это работает для меня в IE. Надеюсь, это поможет.

$("#topbarVis").hover(function(){   $("#topbar").animate({height:"100%"}, 300); },function(){   $("#topbar").animate({height:"0%"}, 300); }); 

Использование этого в качестве CSS.

#topbar {   width: 100%;   height:0px;   background-color: #000; }