[Функция] mouseout(fn)
Раздел "Events"
Связать функцию с событием mouseout для любого элемента.
Параметры
mouseout(fn)
1.0
fn:
функция обработчик события mousemove
function (eventObject) { this; // элемент }
Описание
Событие возникает когда курсор перемещён за границы элемента.
Примеры
Пример:
Отобразить текст, когда события mouseover и mouseout запущены. Событие mouseout запускается, когда курсор помещается или удаляется от элемента обозначаемого как "ребёнок", до тех пор пока не произойдёт событие mouseleave.
"jQuery"
var i = 0; $("div.overout").mouseout(function(){ $("p:first",this).text("Курсор вышел за границы элемента"); $("p:last",this).text(++i); }).mouseover(function(){ $("p:first",this).text("Курсор находится в пределах границ элемента"); }); var n = 0; $("div.enterleave").bind("mouseenter",function(){ $("p:first",this).text("Курсор находится в пределах границ элемента"); }).bind("mouseleave",function(){ $("p:first",this).text("Курсор вышел за границы элемента"); $("p:last",this).text(++n); });
"HTML"
<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>
"CSS"
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; }
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ var i = 0; $("div.overout").mouseout(function(){ $("p:first",this).text("Курсор вышел за границы элемента"); $("p:last",this).text(++i); }).mouseover(function(){ $("p:first",this).text("Курсор находится в пределах границ элемента"); }); var n = 0; $("div.enterleave").bind("mouseenter",function(){ $("p:first",this).text("Курсор находится в пределах границ элемента"); }).bind("mouseleave",function(){ $("p:first",this).text("Курсор вышел за границы элемента"); $("p:last",this).text(++n); }); }); </script> </head> <body class="iframe"> <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> <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>
Версия jQuery 1.4.2
Документ создан 2010-08-21