Detectar IF pairando sobre o elemento com jQuery

Eu não estou procurando uma ação para chamar quando pairando, mas sim uma maneira de saber se um elemento está sendo pairado no momento. Por exemplo:

$('#elem').mouseIsOver(); // returns true or false 

Existe um método jQuery que faz isso?

Resposta original (e correta):

Você pode usar is() e verificar o seletor :hover .

 var isHovered = $('#elem').is(":hover"); // returns true or false 

Exemplo: http://jsfiddle.net/Meligy/2kyaJ/3/

(Isso só funciona quando o seletor corresponde a um elemento no máximo. Veja Editar 3 para saber mais)

.

Editar 1 (29 de junho de 2013): (Aplicável somente ao jQuery 1.9.x, já que funciona com 1.10+, consulte a próxima edição 2)

Essa resposta foi a melhor solução no momento em que a pergunta foi respondida. Este seletor ‘: hover’ foi removido com a remoção do método .hover() no jQuery 1.9.x.

Curiosamente, uma resposta recente de “allicarn” mostra que é possível usar :hover como seletor CSS (vs. Sizzle) quando você prefixar com um seletor $($(this).selector + ":hover").length > 0 , e parece funcionar!

Além disso, o plug- in hoverIntent mencionado em outra resposta também é muito bom.

Editar 2 (21 de setembro de 2013): .is(":hover") funciona

Baseado em outro comentário eu notei que a maneira original que eu postei, .is(":hover") , na verdade ainda funciona em jQuery, então.

  1. Funcionou no jQuery 1.7.x.

  2. Ele parou de funcionar no 1.9.1, quando alguém relatou isso para mim, e todos nós achamos que estava relacionado ao jQuery removendo o alias do hover para manipulação de events naquela versão.

  3. Ele funcionou novamente no jQuery 1.10.1 e 2.0.2 (talvez 2.0.x), o que sugere que a falha em 1.9.x foi um bug ou não um comportamento intencional como pensamos no ponto anterior.

Se você quiser testar isso em uma determinada versão do jQuery, basta abrir o exemplo JSFidlle no início desta resposta, mudar para a versão desejada do jQuery e clicar em “Executar”. Se a cor mudar de foco, isso funciona.

.

Editar 3 (9 de março de 2014): Funciona somente quando a sequência do jQuery contém um único elemento

Como mostrado por @Wilmer nos comentários, ele tem um violino que nem sequer funciona contra as versões do jQuery I e outras aqui testadas contra ele. Quando tentei descobrir o que é especial sobre o caso dele, percebi que ele estava tentando verificar vários elementos por vez. Isso estava jogando Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: hover .

Então, trabalhando com seu violino, isso não funciona:

 var isHovered = !!$('#up, #down').filter(":hover").length; 

Enquanto isso funciona:

 var isHovered = !!$('#up,#down'). filter(function() { return $(this).is(":hover"); }).length; 

Ele também funciona com seqüências jQuery que contêm um único elemento, como se o seletor original correspondesse a apenas um elemento, ou se você chamasse .first() nos resultados, etc.

Isso também é referenciado no meu boletim informativo sobre dicas e resources JavaScript + Web Dev .

Usar:

 var hovered = $("#parent").find("#element:hover").length; 

jQuery 1.9+

Não funciona no jQuery 1.9. Feito este plugin baseado na resposta do user2444818.

 jQuery.fn.mouseIsOver = function () { return $(this).parent().find($(this).selector + ":hover").length > 0; }; 

http://jsfiddle.net/Wp2v4/1/

Algumas atualizações para adicionar depois de trabalhar sobre este assunto por um tempo:

  1. todas as soluções com .is (“: hover”) break on jQuery 1.9.1
  2. O motivo mais provável para verificar se o mouse ainda está sobre um elemento é tentar evitar que os events sejam triggersdos um sobre o outro. Por exemplo, nós estávamos tendo problemas com o nosso mouseleave sendo acionado e completado antes mesmo de nosso evento mouseenter ser concluído. Claro que isso foi por causa de um movimento rápido do mouse.

Usamos hoverIntent https://github.com/briancherne/jquery-hoverIntent para resolver o problema para nós. Essencialmente, desencadeia se o movimento do mouse é mais deliberado. (uma coisa a notar é que ele irá triggersr quando ambos os mouses entrarem em um elemento e sairem – se você quiser usar apenas uma passagem, o construtor terá uma function vazia)

Você pode filtrar seu elemento de todos os elementos flutuantes. Código problemático:

 element.filter(':hover') 

Salvar código:

 jQuery(':hover').filter(element) 

Para retornar booleano:

 jQuery(':hover').filter(element).length===0 

Definir uma bandeira em foco:

 var over = false; $('#elem').hover(function() { over = true; }, function () { over = false; }); 

Então, basta verificar sua bandeira.

Expandindo a resposta de @ Mohamed. Você poderia usar um pouco de encapsulamento

Como isso:

 jQuery.fn.mouseIsOver = function () { if($(this[0]).is(":hover")) { return true; } return false; }; 

Use-o como:

 $("#elem").mouseIsOver();//returns true or false 

Bifurcou o violino: http://jsfiddle.net/cgWdF/1/

Eu gosto da primeira resposta, mas para mim é estranho. Ao tentar verificar apenas após o carregamento da página para o mouse, eu tenho que colocar pelo menos um atraso de 500 milissegundos para que ele funcione:

 $(window).on('load', function() { setTimeout(function() { $('img:hover').fadeOut().fadeIn(); }, 500); }); 

http://codepen.io/molokoloco/pen/Grvkx/

A resposta aceita não funcionou para mim no JQuery 2.x. .is(":hover") retorna false em todas as chamadas.

Acabei com uma solução bem simples que funciona:

 function isHovered(selector) { return $(selector+":hover").length > 0 } 

Definir um sinalizador por resposta de kinakuta parece razoável, você pode colocar um ouvinte no corpo para que você possa verificar se algum elemento está sendo observado em um determinado instante.

No entanto, como você deseja lidar com nós filhos? Você talvez deva verificar se o elemento é um ancestral do elemento atualmente flutuante.

   
Here is a div

Here is ap in the div here is a span in the p foo bar