112

В чем разница между jQuery .mouseover()и .hover()функциями? Если они абсолютно одинаковы, почему jQuery использует оба?

jquery mouseevent

— Бходжендра Раунияр
источник

4

Это не повторяющийся вопрос. ваша предоставленная ссылка имеет события mouseover и mouseenter, но моя - события mouseover и hover.

— Bhojendra Rauniyar

1

они отличаются тем же, что и mouseover nad mouseleave, и принятый ниже ответ не является точным ... функция зависания добавляет события mouseenter и mouseleve, а не события mouseover и mouseout

— Arun P Johny

1

см. jsfiddle.net/arunpjohny/cZb5b/1, переместите указатель мыши от elэлемента к childконсоли и проверьте консоль

— Арун П. Джонни,

@ArunPJohny, пожалуйста, перечитайте, это говорит о том, что mouseenter и mouseleave, а не mouseover и mouseout.

— Bhojendra Rauniyar

1

также с зависанием - jsfiddle.net/arunpjohny/cZb5b/2, если вы можете проанализировать консоль, вы можете найти разницу ...

— Arun P Johny

113

Из официальной документации jQuery

.mouseover()
Привяжите обработчик события к событию JavaScript «наведение курсора» или инициируйте это событие для элемента.

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

Звонок $(selector).hover(handlerIn, handlerOut)- это сокращение от: $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

.mouseenter()

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

mouseoverсрабатывает, когда указатель перемещается также в дочерний элемент, а mouseenterсрабатывает только тогда, когда указатель перемещается в связанный элемент.

Что это значит

Из - за этого, .mouseover()это не то же самое , как .hover(), по той же причине , .mouseover()это не то же самое .mouseenter().

$('selector').mouseover(over_function) // may fire multiple times

// enter and exit functions only called once per element per entry and exit
$('selector').hover(enter_function, exit_function)

— Навин Раунияр
источник

31

.hover()Функция принимает два аргумента функции, один для mouseenterсобытия и один для mouseleaveсобытия.

— Мишик
источник

это отличный момент с точки зрения различий между двумя функциями, упомянутыми в заголовке вопроса, спасибо! ознакомьтесь с приведенной ниже ссылкой на w3schools, чтобы узнать, как работает .hover

— Bahman.A

8

Вы можете попробовать http://api.jquery.com/mouseover/ на странице документации jQuery. Это приятная небольшая интерактивная демонстрация, которая очень наглядно демонстрирует, и вы действительно можете убедиться в этом сами.

Короче говоря, вы заметите, что событие наведения указателя мыши происходит на элементе, когда вы над ним - исходящее либо от его дочернего ИЛИ родительского элемента, но событие ввода мыши возникает только тогда, когда мышь перемещается от родительского элемента к элементу.

— Шиваджи Ранавэр
источник

1

Из официальных документов: ( http://api.jquery.com/hover/ )

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

— Wottensprels
источник

1

Как вы можете прочитать на http://api.jquery.com/mouseenter/

Событие mouseenter JavaScript является собственностью Internet Explorer. Из-за общей полезности события jQuery имитирует это событие, так что его можно использовать независимо от браузера. Это событие отправляется элементу, когда указатель мыши входит в элемент. Любой HTML-элемент может получить это событие.

— Эдорка
источник

Когда выбирать функции mouseover () и hover ()?

Из официальной документации jQuery

Что это значит