Описание: Привязывает двух обработчиков к соответствующим элементам, которые будут выполняться, когда указатель мыши входит и выходит из элементов.
.hover( handlerIn(объектСобытия), handlerOut(объектСобытия) )
Добавлена в версию: 1.0
handlerIn(объектСобытия)
Функция выполняется, когда курсор мыши входит элемент.
handlerOut(объектСобытия)
Функция выполняется, когда курсор мыши выходит из элемента.
Метод .hover() прикрепляет обработчиков для обоих событий mouseenter и mouseleave.
Мы можем использовать его, чтобы просто применить поведение элемента во время того как мышь находится в пределах элемента.
Вызов $(selector).hover(handlerIn, handlerOut) является сокращением для:
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
Смотрите обсуждение по .mouseenter() и .mouseleave() для подробных деталей.
Примеры
Пример 1
Для того, чтобы добавить специальный стиль для элемента списка над котором находится курсор мыши, можно поступить следующим образом:
Пример 1 - Полный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
});
</script>
<style>
ul { margin-left:20px; color:blue; }
li { cursor:default; }
span { color:red; }
</style>
</head>
<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li class='fade'>Chips</li>
<li class='fade'>Socks</li>
</ul>
</body>
</html>
Пример 2
Для того, чтобы добавить специальный стиль для ячейки таблицы над которой находится курсор мыши, можно поступить следующим образом:
Результат выполнения кода выше:
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
Пример 2 - Полный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
});
</script>
<style type="text/css">
.hover { color:blue; background-color:silver; }
</style>
</head>
<body>
<table>
<tr>
<td>Toyota</td>
<td>Fiat</td>
<td>Honda</td>
</tr>
</table>
</body>
</html>
Пример 3
Для удаления привязанных выше событий попробуйте сделать так:Пример 3 - Полный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
});
function unbind()
{
$("td").unbind('mouseenter mouseleave');
}
</script>
<style type="text/css">
.hover { color:blue; background-color:silver; }
</style>
</head>
<body>
<table>
<tr>
<td>Toyota</td>
<td>Fiat</td>
<td>Honda</td>
</tr>
</table>
<input type="button" value="Click here to unbind"
onclick="unbind()" />
</body>
</html>
Описание: Привязывает единственный обработчик к соответствующим элементам, который будет выполняться, когда указатель мыши входит и выходит из элементов.
.hover( handlerInOut(объектСобытия) )
Добавлена в версию: 1.4
handlerInOut(объектСобытия)
Функция выполняется, когда курсор мыши входит или выходит из элемента.
Метод .hover(), когда передается единственная функция, запускает обработчик для обоих событий mouseenter и mouseleave.
Это позволяет пользователю использовать различные методы переключения jQuery
в пределах обработчика.
Вызов $(selector).hover(handlerInOut) является сокращением для:
$(selector).bind("mouseenter mouseleave",handlerInOut);
Смотрите обсуждение по .mouseenter() и .mouseleave() для подробных деталей.
Пример
Вызывает скольжение следующего брата LI вверх и вниз на hover, и переключает класс.
$("li")
.filter(":odd")
.hide()
.end()
.filter(":even")
.hover(
function () {
$(this).toggleClass("active")
.next().stop(true, true).slideToggle();
}
);
Пример - Полный код:
<!DOCTYPE html>
<html>
<head>
<style>
ul { margin-left:20px; color:blue; }
li { cursor:default; }
li.active { background:black;color:white; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("li")
.filter(":odd")
.hide()
.end()
.filter(":even")
.hover(
function () {
$(this).toggleClass("active")
.next().stop(true, true).slideToggle();
}
);
});
</script>
</head>
<body>
<ul>
<li>Milk</li>
<li>White</li>
<li>Carrots</li>
<li>Orange</li>
<li>Broccoli</li>
<li>Green</li>
</ul>
</body>
</html>
Была ли эта информация полезной?
