jQuery hover(over, out)

Поиск функций jQuery

Характеристика функции

[Функция] hover(over, out)

Раздел "Events"

Функция имитирует css свойство hover (при помещениеи курсора мыши на элемент и отведении курсора мыши от элемента). Данная функция представляет собой пользовательский метод, который обеспечивает выполнение частных задач.

Параметры

hover(over, out)

1.3

over: функция, исполняемая в момент когда курсор наведён на элемент

function (eventObject)  { 

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

out: исполняемая функция, в момент когда курсор отведён от элемента

function (eventObject)  { 

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

Описание

Когда курсор мыши наведен над подходящим элементом, первая заданная функция выполняется (over). Всякий раз как курсор мыши будет отведён от элемента, вторая заданная функция выполняется (out). В дополнение, убедитесь в следующем - пока курсор мыши внутри определенного элемента (например зображение внутри элемента div), функция будет повторятся и не прекратится (общая ошибка в использовании обработчика события mouseout).

Возможно, Вам будет интересно прочитать статьи о jQuery:

Примеры

Пример:

Добавить звёздочки при наведении курсора на элемент li:

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

"jQuery"

    $("li").hover(
      function () {
        $(this).append($("<span> ***</span>"));
      }, 
      function () {
        $(this).find("span:last").remove();
      }
    );
// Другой пример, отражающий имитацию свойства hover с гиперсcылками
$("a").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});

"HTML"

<ul>
    <li>Milk</li>
    <li>Bread</li>
    <li>Chips</li>
    <li>Socks</li>
  </ul>

"CSS"

  ul { margin-left:20px; color:blue; }
  li { cursor:default; }
  span { color:red; }

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/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(){

    $("li").hover(
      function () {
        $(this).append($("<span> ***</span>"));
      }, 
      function () {
        $(this).find("span:last").remove();
      }
    );
// Другой пример, отражающий имитацию свойства hover с гиперсcылками
$("a").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});

  });
</script>

</head>
<body class="iframe">


<ul>
    <li>Milk</li>
    <li>Bread</li>
    <li>Chips</li>
    <li>Socks</li>
  </ul>


</body>
</html>


<style>

  ul { margin-left:20px; color:blue; }
  li { cursor:default; }
  span { color:red; }

</style>

Пример:

В следующем примере будет добавлен класс "hover" к ячейкам таблицы при наведении курсора, при его отведении данный класс будет удалён:

"jQuery"

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

Пример:

Освободить обработчик при применении предыдущего примера:

"jQuery"

$("td").unbind('mouseenter mouseleave');

Метод появился в jQuery 1.3

Официальная страница метода - http://api.jquery.com/hover/

Форма для комментариев

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

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

Плагины jQuery UI

Эффекты

Возможно, Вам будет интересно прочитать статьи о jQuery: