Описание: Привязывает обработчик события к событию "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
Inner
Trigger the handler
Обработчик события может быть привязан к любому элементу:
$('#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");
});
Пример - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ 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"); }); }); </script> <style> div.out { width:40%; height:120px; margin:0 15px; background-color:#D6EDFC; float:left; } div.in { width:60%; height:60%; background-color:#FFCC00; margin:10px auto; } p { line-height:1em; margin:0; padding:0; } </style> </head> <body> <div class="out overout"><p>move your mouse</p> <div class="in overout"><p>move your mouse</p> <p>0</p></div><p>0</p></div> <div class="out enterleave"><p>move your mouse</p> <div class="in enterleave"><p>move your mouse</p> <p>0</p></div><p>0</p></div> </body> </html>
Была ли эта информация полезной?
