Содержание:
.hover( handlerIn, handlerOut )Возвращает: jQueryверсия устарела: 3.3
Описание: Связать два обработчика с совпавшими элементами, которые будут выполняться при входе и выходе указателя мыши с элементов.
-
версия добавлена: 1.0.hover( handlerIn, handlerOut )
- handlerInФункция, которая должна выполняться при входе указателя мыши в элемент.
- handlerOutФункция, которая должна выполняться при выходе указателя мыши из элемента.
-
Этот API устарел. Используйте .on( "mouseenter", handlerIn ).on( "mouseleave", handlerOut ) вместо него.
Метод .hover() связывает обработчики для обоих событий mouseenter и mouseleave. Можно использовать его для простого применения поведения к элементу в течение времени, когда мышь находится внутри элемента.
Вызов $( selector ).hover( handlerIn, handlerOut ) является сокращением для:
$( selector ).on( "mouseenter", handlerIn ).on( "mouseleave", handlerOut );
См. обсуждения mouseenter и mouseleave для получения более подробной информации.
Примеры:
Чтобы добавить специальный стиль к элементам списка, над которыми выполняется наведение курсора, попробуйте:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hover demo</title>
<style>
ul {
margin-left: 20px;
color: blue;
}
li {
cursor: default;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li class="fade">Chips</li>
<li class="fade">Socks</li>
</ul>
<script>
$( "li" ).hover(
function() {
$( this ).append( $( "<span> ***</span>" ) );
}, function() {
$( this ).find( "span" ).last().remove();
}
);
$( "li.fade" ).hover(function() {
$( this ).fadeOut( 100 );
$( this ).fadeIn( 500 );
});
</script>
</body>
</html> Демо:
Чтобы добавить специальный стиль к ячейкам таблицы, над которыми выполняется наведение курсора, попробуйте:
$( "td" ).hover(
function() {
$( this ).addClass( "hover" );
}, function() {
$( this ).removeClass( "hover" );
}
); Чтобы отменить приведенный выше пример, используйте:
$( "td" ).off( "mouseenter mouseleave" );
.hover( handlerInOut )Возвращает: jQueryверсия устарела: 3.3
Описание: Связать один обработчик с совпавшими элементами, который будет выполняться при входе или выходе указателя мыши из элементов.
-
версия добавлена: 1.4.hover( handlerInOut )
- handlerInOutФункция, которая должна выполняться при входе или выходе указателя мыши из элемента.
-
Этот API устарел. Используйте .on( "mouseenter mouseleave", handlerInOut ) вместо него.
Метод .hover(), при передаче одной функции, выполнит этот обработчик для обоих событий mouseenter и mouseleave. Это позволяет пользователю использовать различные методы переключения jQuery внутри обработчика или реагировать по-разному внутри обработчика в зависимости от event.type.
Вызов $(selector).hover(handlerInOut) является сокращением для:
$( selector ).on( "mouseenter mouseleave", handlerInOut );
См. обсуждения mouseenter и mouseleave для получения более подробной информации.
Пример:
Перемещайте следующий элемент LI вверх или вниз при наведении курсора и переключайте класс.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hover demo</title>
<style>
ul {
margin-left: 20px;
color: blue;
}
li {
cursor: default;
}
li.active {
background: black;
color: white;
}
span {
color:red;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<ul>
<li>Milk</li>
<li>White</li>
<li>Carrots</li>
<li>Orange</li>
<li>Broccoli</li>
<li>Green</li>
</ul>
<script>
$( "li" )
.odd()
.hide()
.end()
.even()
.hover(function() {
$( this )
.toggleClass( "active" )
.next()
.stop( true, true )
.slideToggle();
});
</script>
</body>
</html> 
