jQuery - наведение/отключение мыши с несколькими div

У меня есть скрытый 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;
}

js:

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

jquery mouseover mouseout jquery-animate
person We're All Scholars    schedule 11.02.2011    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Вместо этого используйте mouseenter/mouseleave:

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

...или просто используйте hover()(документы)< /a> метод, который является ярлыком для mouseenter/mouseleave:

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

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

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

person user113716    schedule 11.02.2011
comment
в чем тут разница? У меня такое же поведение с mouseenter / mouseleave - person jAndy; 12.02.2011
comment
@jAndy: У тебя не должно быть такого поведения. mosueenter/mouseleave должен срабатывать только для элемента, к которому он фактически прикреплен. Не его потомки. - person user113716; 12.02.2011
comment
@jAndy: Вот пример. Когда вы наводите курсор на внешний квадрат, срабатывает событие. Но не на внутренней. Если вы переключите его на mouseover/mouseout, он также сработает и внутри. - person user113716; 12.02.2011
comment
@jAndy: Нет, просто обычный переход от потомка к элементу, у которого есть обработчик. Это кажется немного странным, потому что когда вы наводите курсор на внутренний квадрат, он сначала запускает mouseout, потому что технически вы выходите из внешнего квадрата. То есть вы оставляете ту его часть, которая не скрыта его потомком. Система IE mouseenter/mouseleave кажется более разумной, но она не является частью спецификации. :о( - person user113716; 12.02.2011

arrow_upward
0
arrow_downward

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

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

Используя это как CSS.

#topbar {   width: 100%;   height:0px;   background-color: #000; }
person Matthew Davis    schedule 11.02.2011