Привязывает обработчик события к событию "mouseover" JavaScript, или вызывает данное событие на элемент.
.mouseover( handler(объектСобытия) )
Добавлена в версию: 1.0
handler(объектСобытия)
Функция
Функция выполняется каждый раз, когда вызывается событие.
.mouseover( )
Добавлена в версию: 1.0
.mouseover( [ данныеСобытия ], обработчик(объектСобытия)
Добавлена в версию: 1.4.3
Карта данных, которая будет передана в обработчик событий.
обработчик(объектСобытия)
Функция
Функция для выполнения каждый раз, когда событие вызвано.
Этот метод является сокращением для .bind('mouseover', handler) в первом варианте, и .trigger('mouseover') во втором.
Событие mouseover посылается элементу, когда указатель мышки входит в элемент. Любой элемент HTML может получать это событие. Для примера, рассмотрим HTML:
<div id="outer">
Outer
<div id="inner">
Inner
</div>
</div>
<div id="other">
Trigger the handler
</div>
<div id="log"></div>
Обработчик события может быть привязан к любому элементу:
$('#outer').mouseover(function() {
$('#log').append('<div>Handler for .mouseover() called.</div>');
});
Теперь, когда указатель мышки над Outer <div>, сообщение будет приложенно к <div id="log">.
Мы также можем запустить событие, когда второй объект нажат:
$('#other').click(function() {
$('#outer').mouseover();
});
После выполнения этого кода, нажатие на Trigger the handler также выдаст сообщение.
Этот тип события может вызвать много головной боли. Например, когда курсор перемещается над элементом Inner в этом примере, событие mouseover будет отправленно на него, и затем на Outer.
Это может вызвать связывание обработчика mouseover в неподходящее время. Смотрите обсуждение о .mouseenter() для полезной альтернативы. Примеры
Пример 1
Отображает текст по событиям mouseover и mouseout.
Mouseover активируется, когда указатель мыши входит или выходит в/из дочерний(го) элемент(а), в то время как
mouseenter этого не делает.
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").bind("mouseenter",function(){
$("p:first",this).text("mouse enter");
$("p:last",this).text(++n);
}).bind("mouseleave",function(){
$("p:first",this).text("mouse leave");
});
|