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