jQuery метод .hover()

Определение и применение

jQuery метод .hover() связывает один или два обработчика событий для элемента, которые будут выполнены, когда указатель мыши находится на элементе и при его отведении.

jQuery синтаксис:

Синтаксис 1.0:
$( selector ).hover( handlerIn, handlerOut ) 

handlerIn - Function( Event eventObject )
handlerOut - Function( Event eventObject )

Синтаксис 1.4:
$( selector ).hover( handlerInOut ) 

handlerInOut - Function( Event eventObject )

Метод .hover() объединяет обработчики событий "mouseenter" (срабатывает, когда указатель мыши заходит на элемент) и "mouseleave" (срабатывает, когда указатель мыши выходит из элемента) и при вызове с двумя функциями в качестве параметров является короткой записью вызова методов .mouseenter() и .mouseleave():

$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

Обратите внимание, что если в качестве параметра метода передается только одна функция, то она будет вызвана как при наведении указателя мыши на элемент, так и при выходе курсора с элемента.

Добавлен в версии jQuery

1.0 (синтаксис обновлен в версии 1.4)

Значения параметров

Параметр	Описание
handlerIn	Функция, которая срабатывает, когда указатель мыши заходит на элемент. Функция в качестве параметра может принимать объект Event.
handlerIn	Функция, которая срабатывает, когда указатель мыши выходит из элемента. Функция в качестве параметра может принимать объект Event.
handlerInOut	Функция, которая срабатывает, когда указатель мыши заходит на элемент и выходит из элемента. Функция в качестве параметра может принимать объект Event.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .hover() (две функции)</title>
		<style>div {
width: 150px; /* ширина элемента */	
height: 150px; /* высота элемента */	
border: 1px solid green; /* сплошная граница элемента зеленого цвета */	
}
</style>			
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "div" ).hover(function(){ // задаем функцию при наведении курсора на элемент	
	    $( "div" ).css( "background", "green" ) // задаем цвет заднего фона
	  	      .text("Курсор на элементе"); // задаем текстовое содержимое
	    }, function(){ // задаем функцию, которая срабатывает, когда указатель выходит из элемента 	
	    $( "div" ).css( "background", "red" ) // задаем цвет заднего фона
	  	      .text("Курсор вышел из элемента"); // задаем текстовое содержимое
	  });
	});
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>

В этом примере с использованием jQuery метода .hover() мы при наведении курсором мыши на элементе <div> задаем функцию, которая с использованием метода .css() задает цвет заднего фона элемента, а с использованием метода .text() задаем текстовое содержимое. После того как указатель выходит из элемента срабатывает вторая функция, которая также изменяет цвет заднего фона и изменяет текстовое содержимоей элемента <div>.

Результат нашего примера:

Пример использования jQuery метода .hover() (две функции). — Пример использования jQuery метода .hover() (две функции)

Рассмотрим следующий пример в котором передадим в качестве параметра метода .hover() одну функцию:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .hover() (одна функция)</title>
		<style>div {
width: 150px; /* ширина элемента */	
height: 150px; /* высота элемента */	
border: 1px solid red; /* сплошная граница элемента красного цвета */
background: green; /* цвет заднего фона */
}
.background-red {
background: red; /* цвет заднего фона */
}
</style>			
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "div" ).hover(function(){ // задаем функцию при наведении курсора на элемент и при его отведении	
	    $( this ).toggleClass( "background-red" ) // добавляем, или убираем класс у текущего элемента div
	  });
	});
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>

В этом примере с использованием jQuery метода .hover() мы при наведении курсором мыши на элементе <div> задаем функцию, которая с использованием метода .toggleClass() добавляет класс элементу при наведении, и убирает класс у элемента, когда курсор выходит за элемент, то есть мы используем одну функцию для двух событий.

Результат нашего примера:

Пример использования jQuery метода .hover() (одна функции). — Пример использования jQuery метода .hover() (одна функция)

jQuery события