Оглавление

.hover()

hover() — позволяет обработать наведение и уход курсора с элемента с помощью одного метода. Имеет следующий формат.
hover(<Функция обратного вызова для события onmouseover>,

      <Функция обратного вызова для события onmouseout>)

 

Переделаем наш предыдущий пример и используем метод hover ().


$("a").hover(function() {
   $(this).css("color", "red");
   $("#div1").append("Событие onmouseover" + "<br>");
}, function() {
   $(this).css("color", "black");
   $("#div1").append("Событие onmouseout" + "<br>");
});

 

Использование метода hover() имеет еще одно преимущество. Если внутри блока существует другой блок, то отдельные функции будут вызываться при входе во внутренний блок, а также при выходе из него. При использовании метода hover() эти перемещения будут игнорироваться (листинг 6.2).

 
Листинг 6.2. Особенности использования метода hover()

<html>
<head>
<title>Особенности использования метода hover()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#div1").mouseover(function() {
      $("#log1").append("Событие onmouseover<br>");
   });
   $("#div1").mouseout(function() {
      $("#log1").append("Событие onmouseout<br>");
   });
   $("#div2").hover(
      function() {
         $("#log2").append("Событие onmouseover<br>");
      },
      function() {
         $("#log2").append("Событие onmouseout<br>");
      }
   );
});
//-->
</script>
<style>
.cls1 {
   border:2px solid black; background-color:green;
padding:30px;
}
.cls2 {
   border:2px solid black; background-color:silver;
}
</style>
</head>
<body>
<b>Отдельные обработчики:</b><br>
<div class="cls1" id="div1">
<div class="cls2">
Строка 1<br>
Строка 2
</div>
</div>
<div id="log1"></div>
<b>Функция hover():</b><br>
<div class="cls1" id="div2">
<div class="cls2">
Строка 1<br>
Строка 2
</div>
</div>
<div id="log2"></div>
</body>
</html>

 

Для первого вложенного блока мы определили отдельные обработчики событий. Если переместить курсор мыши через весь блок посередине, получим следующую последовательность событий.
Событие onmouseover

Событие onmouseout

Событие onmouseover

Событие onmouseout

Событие onmouseover

Событие onmouseout

 

Для второго вложенного блока обработчики событий назначены с помощью метода hover (). При том же самом действии мы получим только два события.
Событие onmouseover

Событие onmouseout

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити