Kiedy wybrać funkcję mouseover () i hover ()?

112

Jakie są różnice między jQuery .mouseover()a .hover()funkcjami? Jeśli są całkowicie takie same, dlaczego jQuery używa obu?

jquery mouseevent Bhojendra Rauniyar
źródło
4
To nie jest zduplikowane pytanie. podany link zawiera zdarzenia mouseover i mouseenter, a moje to zdarzenia mouseover i hover.
Bhojendra Rauniyar,
1
różnią się one tak samo jak mouseover i mouseleave, a zaakceptowana odpowiedź poniżej nie jest dokładna ... funkcja hover dodaje zdarzenia mouseenter i mouseleve, a nie zdarzenia mouseover i mouseout
Arun P Johny
1
patrz jsfiddle.net/arunpjohny/cZb5b/1 przesuń mysz z elelementu do childi sprawdź konsolę
Arun P Johny
@ArunPJohny, proszę przeczytaj jeszcze raz, to znaczy, że mouseenter i mouseleave nie najeżdżają myszą i nie wyłączają myszy.
Bhojendra Rauniyar
1
również z najechaniem - jsfiddle.net/arunpjohny/cZb5b/2 jeśli możesz przeanalizować konsolę, możesz znaleźć różnicę ...
Arun P Johny

Odpowiedzi:

113

Z oficjalnej dokumentacji jQuery

  • .mouseover()
    Powiąż procedurę obsługi zdarzeń ze zdarzeniem JavaScript „mouseover” lub wywołaj to zdarzenie w elemencie.

  • .hover() Powiąż jeden lub dwa programy obsługi z dopasowanymi elementami, które zostaną wykonane, gdy wskaźnik myszy wejdzie i opuści elementy.

    Wywołanie $(selector).hover(handlerIn, handlerOut)jest skrótem od: $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

  • .mouseenter()

    Powiąż procedurę obsługi zdarzeń, która ma być uruchamiana, gdy mysz wchodzi do elementu, lub wyzwalaj tę procedurę obsługi na elemencie.

    mouseoveruruchamia się, gdy wskaźnik przesuwa się również do elementu podrzędnego, natomiast mouseenteruruchamia się tylko wtedy, gdy wskaźnik przesuwa się do elementu związanego.

Co to znaczy

Z tego powodu, .mouseover()to nie to samo co .hover(), z tego samego powodu .mouseover()jest nie taka sama jak .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)
Navin Rauniyar
źródło
31

.hover()funkcja przyjmuje dwa argumenty funkcji, jeden dla mouseenterzdarzenia i jeden dla mouseleavezdarzenia.

mishik
źródło
to świetna uwaga, jeśli chodzi o różnice między dwiema funkcjami wymienionymi w tytule pytania, dzięki! sprawdź poniższy link w w3schools, aby dowiedzieć się, jak działa .hover (): w3schools.com/jquery/event_hover.asp
Bahman.A
8

Możesz to wypróbować http://api.jquery.com/mouseover/ na stronie dokumentacji jQuery. To ładne, interaktywne demo, które sprawia, że ​​jest bardzo jasne i możesz się o tym przekonać.

Krótko mówiąc, zauważysz, że zdarzenie myszy nad elementem występuje na elemencie, gdy jesteś nad nim - pochodzącym z jego elementu podrzędnego LUB nadrzędnego, ale zdarzenie wejścia myszą występuje tylko wtedy, gdy mysz przesuwa się z elementu nadrzędnego do elementu.

Shivaji Ranaware
źródło
1

Z oficjalnej dokumentacji: ( http://api.jquery.com/hover/ )

Metoda .hover () wiąże programy obsługi dla zdarzeń mouseenter i mouseleave. Możesz go użyć, aby po prostu zastosować zachowanie do elementu, gdy mysz znajduje się w elemencie.

Wottensprels
źródło
1

Jak możesz przeczytać na http://api.jquery.com/mouseenter/

Zdarzenie JavaScript mouseenter jest zastrzeżone dla programu Internet Explorer. Ze względu na ogólną użyteczność zdarzenia jQuery symuluje to zdarzenie, dzięki czemu może być używane niezależnie od przeglądarki. To zdarzenie jest wysyłane do elementu, gdy wskaźnik myszy wchodzi do elementu. To zdarzenie może otrzymać każdy element HTML.

Edorka
źródło