Обработчик события может быть привязан к любому элементу:
$('#outer').mouseleave(function() {
$('#log').append('<div>Handler for .mouseleave() called.</div>');
});
Теперь, когда указатель мышки выходит из Outer <div>, сообщение прилагается к <div id="log">.
Мы можем также вызвать это событие, когда нажат другой элемент:
$('#other').click(function() {
$('#outer').mouseleave();
});
После выполнения этого кода, нажатие на Trigger the handler также выдаст сообщение.
Событие mouseleave отличается от mouseout способом передачи обработчика события.
Если mouseout был использован в данном примере,
а затем, когда курсор мыши вышел из элемента Inner,
обработчик будет запущен.
Это, как правило нежелательное поведение.
Событие mouseleave, с другой стороны, только запускает свой обработчик, когда мышка покидает связанный элемент, не потомок.
Таким образом, в этом примере обработчик запускается, когда мышка покидает элемент Outer, но не элемент
Inner.
Отображает текст по событиям mouseover и mouseleave.
var i = 0;
$("div.overout").mouseout(function(){
$("p:first",this).text("mouse out");
$("p:last",this).text(++i);
}).mouseover(function(){
$("p:first",this).text("mouse over");
});
var n = 0;
$("div.enterleave").mouseenter(function(){
$("p:first",this).text("mouse enter");
}).mouseleave(function(){
$("p:first",this).text("mouse leave");
$("p:last",this).text(++n);
});