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

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

Respostas:

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