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