hover()

32
посл. ред. 14.09.2016

Метод hover() элементам текущей выборки устанавливает 1 или 2 обработчика событий mouseenter и mouseleave. Используются именно эти события, а не mouseover и mouseout. Событие mouseenter используется, потому что оно не всплывает. Обработчик сработает один раз при наведении курсора на элемент, и не будет срабатывать при наведении курсора на его потомков. Событие mouseleave используется, потому что оно не срабатывает при переводе курсора с самого элемента на его потомков (ведь курсор остаётся в пределах элемента) и оно тоже не всплывает.

Удаляются обработчики, установленные данным методом, вызовом:

jQ_object.off('mouseenter mouseleave')

Варианты использования

jQ_object.hover(обработчик-1, обработчик-2) => jQuery
Устанавливает первый обработчик на событие mouseenter, а второй - на событие mouseleave. Данный вариант является укороченным вызовом: 
jQ_object.on({
  'mouseenter': обработчик-1,
  'mouseleave': обработчик-2
})
jQ_object.hover(обработчик) => jQuery
Устанавливает на события mouseenter и mouseleave один общий обработчик. Данный вариант является укороченным вызовом: 
jQ_object.on('mouseenter mouseleave', обработчик)

Примеры

<html>
<head>
  <title>Работа с событиями в jQuery</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<style>
  .outerBox {
    box-sizing: border-box;
    width: 200px;
    height: 140px;
    margin: 20px;
    padding: 35px 50px;
    background: #972;
  }
  .innerBox {
    width: 100px;
    height: 70px;
    background: #279;
  }
</style>
<body>
  <div id="box1" class="outerBox">
    <div class="innerBox">
      mouseover: <u class="in">0</u><br>
      mouseout: <u class="out">0</u>
    </div>
  </div>
  <div id="box2" class="outerBox">
    <div class="innerBox">
      mouseenter: <u class="in">0</u><br>
      mouseleave: <u class="out">0</u>
    </div>
  </div>
</body>
</html>
 
<script>
function handlerIn() {
  $('.in', this).text(function(i, count) {return +count + 1});
}
function handlerOut() {
  $('.out', this).text(function(i, count) {return +count + 1});
}

/* На элементе #box1 обрабатываются события mouseover и mouseout */
$('#box1').on({
  'mouseover': handlerIn,
  'mouseout': handlerOut
});

/* На элементе #box2 обрабатываются события mouseenter и mouseleave */
$('#box2').hover(handlerIn, handlerOut);
</script>
mouseover: 0
mouseout: 0
mouseenter: 0
mouseleave: 0

В первом случае при переводе курсора на innerBox срабатывает событие mouseout для внешнего элемента outerBox, хотя курсор остаётся в пределах элемента. Затем срабатывает событие mouseover для внутреннего элемента innerBox, которое всплывает и запускает обработчик внешнего элемента outerBox. Такая же картина наблюдается и при наведении курсора на элементы <u>.

Во втором случае обработчики handlerIn и handlerOut запускаются по одному разу при наведении и потере курсора элементом outerBox.