jQuery метод .mouseenter()

Определение и применение

jQuery метод .mouseenter() привязывает JavaScript обработчик событий mouseenter (срабатывает, когда указатель мыши заходит на элемент), или запускает это событие на выбранный элемент.

jQuery синтаксис:

Синтаксис 1.0:

$( selector ).mouseenter() // метод используется без параметров

$( selector ).mouseenter( handler )

handler - Function( Event eventObject )

Синтаксис 1.4.3:

$( selector ).mouseenter( eventData, handler )

eventData - Anything

handler - Function( Event eventObject )

Обращаю Ваше внимание, что метод .mouseenter(), используемый вместе с функцией, переданной в качестве параметра (handler) является, короткой записью метода .on(), а без параметра является короткой записью метода .trigger():

$( selector ).on( "mouseenter", handler )

$( selector ).trigger( "mouseenter" )

Добавлен в версии jQuery

Значения параметров

Пример старого кода

Пример использования jQuery метода .mouseenter() (без параметров и с функцией)

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html

HTML

<button>Клик</button>
<div>Элемент div</div>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        $('div').mouseenter()
    })
    $('div').mouseenter(function () {
        $('div').css('background', 'green')
    })
    $('div').mouseleave(function () {
        $('div').css('background', 'red')
    })
})

style.css

CSS

div {
    width: 100px;
    height: 100px;
    margin-top: 30px;
    background: yellow;
}

В этом примере с использованием jQuery метода .mouseenter() мы при нажатии на элемент <button> (кнопка) вызываем событие "mouseenter" на элементе <div>. Самому элементу <div> задаем, что при срабатывании события "mouseenter" на элементе выполнить функцию, которая с использованием метода .css() изменяет цвет заднего фона элемента. То есть мы вызываем событие .mouseenter() либо при нажатии на кнопку, либо при вхождении указателя мыши на элемент.

Кроме того, мы задаем функцию при выхождении указателя мыши из элемента <div> (событие .mouseleave()), которая по аналогии с предыдущим событием изменяет цвет заднего фона элемента.

Рассмотрим следующий пример в котором сравним разницу в срабатывании событий "mouseenter" и "mouseover":

Отличие mouseenter от mouseover

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html

HTML

<div class="enter">
  <span>mouseenter - </span>
  <div></div>
</div>

<div class="over">
  <span>mouseover - </span>
  <div></div>
</div>

main.js

JavaScript

$(document).ready(function () {
    var enter = 0
    $('.enter').mouseenter(function () {
        enter++
        $('.enter span').text('mouseenter - ' + enter)
    })
    var over = 0
    $('.over').mouseover(function () {
        over++
        $('.over span').text('mouseover - ' + over)
    })
})

style.css

CSS

div {
    width: 200px;
    height: 200px;
    margin: 25px 45px;
    background: yellow;
    display: inline-block;
    text-align: center;
}
div > div {
    width: 100px;
    height: 100px;
    background: green;
}

В этом примере для демонстрации отличий между событиями "mouseenter" и "mouseover" мы создали два отдельних родительских блока, содержащих в себе дочерние блоки. Обратите внимание, что событие "mouseover" срабатывает даже тогда, когда указатель мыши переходит с родительского элемента на дочерний (вложенный) и с дочернего элемента обратно на родительский не смотря на то, что указатель в этот момент не покидал пределы родительского элемента (event bubbling), а событие "mouseenter" срабатывает только когда указатель входит на родительский элемент, независимо от того перемещается он по дочерним элементам, или нет.