hover

« Обратно к странице событий

[редактировать]

hover( over, out )

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

over Функция
Функция, запускающаяся, когда курсор мыши проходит над соответствующим элементом.

function callback(eventObject) {
  this; // dom element
}
out Функция
Функция, запускающаяся, когда курсор покидает область объекта.

function callback(eventObject) {
  this; // dom element
}
Примеры:

Для того, чтобы добавить специальный стиль для элемента списка над котором находится курсор мыши, можно поступить следующим образом:
    $("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);});
<!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>
  $(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>
Для того, чтобы добавить специальный стиль для ячейки таблицы над которой находится курсор мыши, можно поступить следующим образом:
$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);
Для удаления привязанных выше событий попробуйте сделать так:
$("td").unbind('mouseenter mouseleave');
Name Type