Руководство jQuery

Опубликовано admin - вт, 05/01/2018 - 23:40

[Функция] mouseover(fn)

Раздел "Events"

Связать функцию с событием mouseover для любого элемента.

Параметры

mouseover(fn)

1.0

fn: функция обработчик события mouseover

function (eventObject)  { 

	this; // элемент 
}

Описание

Событие mouseover возникает когда курсор перемещается над элементом.

Примеры

Пример:

В примере отображается текст, когда события mouseover и mouseout запущены. Mouseover событие запускается, когда указатель передвигается внутрь или удаляется от элемента до тех пор пока не произошло событие mouseenter.

Пример
Весь код

"jQuery"

    var i = 0;
    $("div.overout").mouseover(function(){
      $("p:first",this).text("Курсор находится в пределах границ элемента");
      $("p:last",this).text(++i);
    }).mouseout(function(){
      $("p:first",this).text("Курсор вышел за границы элемента");
    });

    var n = 0;
    $("div.enterleave").bind("mouseenter",function(){
      $("p:first",this).text("Курсор находится в пределах границ элемента");
      $("p:last",this).text(++n);
    }).bind("mouseleave",function(){
      $("p:first",this).text("Курсор вышел за границы элемента");
    });

"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").mouseover(function(){
      $("p:first",this).text("Курсор находится в пределах границ элемента");
      $("p:last",this).text(++i);
    }).mouseout(function(){
      $("p:first",this).text("Курсор вышел за границы элемента");
    });

    var n = 0;
    $("div.enterleave").bind("mouseenter",function(){
      $("p:first",this).text("Курсор находится в пределах границ элемента");
      $("p:last",this).text(++n);
    }).bind("mouseleave",function(){
      $("p:first",this).text("Курсор вышел за границы элемента");
    });

	  });
	</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.0 (http://api.jquery.com/mouseover/)

Версия jQuery 1.4.2 Документ создан 2010-08-21

Руководство по jQuery!

Плагины jQuery UI

Эффекты