112

Quais são as diferenças entre jQuery .mouseover()e .hover()funções? Se eles são totalmente iguais, por que o jQuery usa os dois?

jquery mouseevent

— Bhojendra Rauniyar
fonte

4

Esta não é uma pergunta duplicada. o link fornecido tem eventos de mouseover e mouseenter, mas os meus são eventos de mouseover e passar o mouse.

— Bhojendra Rauniyar

1

eles são diferentes da mesma forma que mouseover e mouseleave e a resposta aceita abaixo não é precisa ... a função hover adiciona eventos mouseenter e mouseleve, não eventos mouseover e mouseout

— Arun P Johny

1

consulte jsfiddle.net/arunpjohny/cZb5b/1 mova o mouse do elelemento para childe verifique o console

— Arun P Johny

@ArunPJohny por favor releia, que está dizendo: mouseenter e mouseleave não mouseover e mouseout.

— Bhojendra Rauniyar

1

também com hover - jsfiddle.net/arunpjohny/cZb5b/2 se você pode analisar o console, você pode encontrar a diferença ...

— Arun P Johny

113

Da documentação oficial do jQuery

.mouseover()
Vincule um manipulador de eventos ao evento JavaScript "mouseover" ou acione esse evento em um elemento.

.hover() Vincule um ou dois manipuladores aos elementos correspondentes, para serem executados quando o ponteiro do mouse entrar e sair dos elementos.

Chamar $(selector).hover(handlerIn, handlerOut)é uma abreviatura de: $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

.mouseenter()

Vincule um manipulador de eventos a ser disparado quando o mouse entrar em um elemento ou acione esse manipulador em um elemento.

mouseoverdispara quando o ponteiro se move para o elemento filho também, enquanto mouseenterdispara apenas quando o ponteiro se move para o elemento vinculado.

O que isto significa

Por isso, não.mouseover() é o mesmo que , pela mesma razão não é o mesmo que ..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)

— Navin Rauniyar
fonte

31

.hover()função aceita dois argumentos de função, um para mouseenterevento e outro para mouseleaveevento.

— mishik
fonte

este é um ponto importante em termos das diferenças entre as duas funções mencionadas no título da pergunta, obrigado! confira o link abaixo em w3schools para saber como .hover () funciona: w3schools.com/jquery/event_hover.asp

— Bahman.A

8

Você pode experimentar http://api.jquery.com/mouseover/ na página de documentos do jQuery. É uma pequena demonstração interativa que deixa tudo muito claro e você pode ver por si mesmo.

Resumindo, você notará que um evento de mouse over ocorre em um elemento quando você está sobre ele - vindo de seu elemento filho OU pai, mas um evento de entrada do mouse ocorre apenas quando o mouse se move do elemento pai para o elemento.

— Shivaji Ranaware
fonte

1

Dos documentos oficiais: ( http://api.jquery.com/hover/ )

O método .hover () vincula manipuladores para eventos mouseenter e mouseleave. Você pode usá-lo para simplesmente aplicar o comportamento a um elemento durante o tempo em que o mouse está dentro do elemento.

— Wottensprels
fonte

1

Como você pode ler em http://api.jquery.com/mouseenter/

O evento mouseenter do JavaScript é propriedade do Internet Explorer. Devido à utilidade geral do evento, o jQuery simula este evento para que possa ser usado independentemente do navegador. Este evento é enviado a um elemento quando o ponteiro do mouse entra no elemento. Qualquer elemento HTML pode receber este evento.

— Edorka
fonte

Quando escolher as funções mouseover () e hover ()?

Da documentação oficial do jQuery

O que isto significa