mouseup - Como faço para verificar se o mouse está sobre um elemento no jQuery?




on mouse click jquery (16)

APENAS FYI para futuros descobridores disso.

Eu fiz um plugin jQuery que pode fazer isso e muito mais. No meu plugin, para obter todos os elementos em que o cursor está atualmente, basta fazer o seguinte:

$.cursor("isHover"); // will return jQ object of all elements the cursor is 
                     // currently over & doesn't require timer

Como mencionei, também tem muitos outros usos, como você pode ver no

jsFiddle encontrado aqui

Existe uma maneira rápida e fácil de fazer isso no jQuery que estou perdendo?

Eu não quero usar o evento mouseover porque eu já estou usando para outra coisa. Eu só preciso saber se o mouse está sobre um elemento em um determinado momento.

Eu gostaria de fazer algo assim, se houvesse uma função "IsMouseOver":

function hideTip(oi) {
    setTimeout(function() { if (!IsMouseOver(oi)) $(oi).fadeOut(); }, 100);
}

Apenas uma nota sobre o popular e útil Arthur Goldsmith resposta acima: Se você está movendo o mouse de um elemento para outro no IE (pelo menos até o IE 9) você pode ter problemas para fazer isso funcionar corretamente se o novo elemento tiver um fundo transparente (que seria por padrão). Minha solução alternativa era dar ao novo elemento uma imagem de fundo transparente.


Aqui está uma técnica que não depende do jquery e usa a API matches DOM nativa. Ele usa prefixos de fornecedores para suportar navegadores que retornam ao IE9. Veja matchesselector em caniuse.com para detalhes completos.

Primeiro crie a função matchesSelector, assim:

var matchesSelector = (function(ElementPrototype) {
var fn = ElementPrototype.matches ||
          ElementPrototype.webkitMatchesSelector ||
          ElementPrototype.mozMatchesSelector ||
          ElementPrototype.msMatchesSelector;

return function(element, selector) {
  return fn.call(element, selector);
};

})(Element.prototype);

Então, para detectar o foco:

var mouseIsOver = matchesSelector(element, ':hover');

Combinei idéias deste tópico e descobri isso, o que é útil para mostrar / ocultar um submenu:

$("#menu_item_a").mouseenter(function(){
   clearTimeout($(this).data('timeoutId'));
   $("#submenu_a").fadeIn("fast");
}).mouseleave(function(){
   var menu_item = $(this);

   var timeoutId = setTimeout(function(){
      if($('#submenu_a').is(':hover'))
      {
        clearTimeout(menu_item.data('timeoutId'));
      }
      else
      {
        $("#submenu_a").fadeOut("fast");
      }
   }, 650);

    menu_item.data('timeoutId', timeoutId); 
});

 $("#submenu_a").mouseleave(function(){
   $(this).fadeOut("fast");
 });

Parece funcionar para mim. Espero que isso ajude alguém.

EDIT: Agora percebendo que esta abordagem não está funcionando corretamente no IE.


Defina um tempo limite no mouseout para eliminar e armazenar o valor de retorno para os dados no objeto. Em seguida, em caso de cancelamento, cancele o tempo limite se houver um valor nos dados.

Remova os dados no retorno de chamada do fadeout.

Na verdade, é menos dispendioso usar mouseenter / mouseleave, porque eles não disparam para o menu quando as crianças passam o mouse sobre o mouse.


Essa seria a maneira mais fácil de fazer isso!

  function(oi) 
  {
   if(!$(oi).is(':hover')){$(oi).fadeOut(100);}
  }

Estendendo-se sobre o que 'Happytime harry' disse, certifique-se de usar a função jquery .data () para armazenar o id de timeout. Isso é para que você possa recuperar o ID de tempo limite com muita facilidade quando o 'mouseenter' for acionado no mesmo elemento mais tarde, permitindo que você elimine o gatilho para a sua dica de ferramenta desaparecer.


Eu não pude usar nenhuma das sugestões acima.
Por que eu prefiro minha solução?
Este método verifica se o mouse está sobre um elemento a qualquer momento escolhido por você .
Mouseenter e : hover são legais, mas o mouseenter dispara somente se você mover o mouse, não quando o elemento se mover sob o mouse.
: hover é bem legal mas ... ou seja

Então eu faço isso:

Não 1. guarde a posição x, y do mouse toda vez que for movido quando precisar,
Não 2. verifique se o mouse está sobre qualquer um dos elementos que correspondem à consulta, faça coisas ... como acionar um evento mouseenter

// define mouse x, y variables so they are traced all the time
var mx = 0; //  mouse X position
var my = 0; //  mouse Y position

// update mouse x, y coordinates every time user moves the mouse
$(document).mousemove(function(e){
    mx = e.pageX;
    my = e.pageY;
});

// check is mouse is over an element at any time You need (wrap it in function if You need to)
$("#my_element").each(function(){
    boxX = $(this).offset().left;
    boxY = $(this).offset().top;
    boxW = $(this).innerWidth();
    boxH = $(this).innerHeight();
    if ((boxX <= mx) &&
        (boxX + 1000 >= mx) &&
        (boxY <= my) &&
        (boxY + boxH >= my))
    {
        // mouse is over it so you can for example trigger a mouseenter event
        $(this).trigger("mouseenter");
    }
});

Eu precisava de algo exatamente como isso (em um ambiente um pouco mais complexo e a solução com muitos 'mouseenters' e 'mouseleaves' não estava funcionando corretamente) então eu criei um pequeno plugin jquery que adiciona o método ismouseover. Tem funcionado muito bem até agora.

//jQuery ismouseover  method
(function($){ 
    $.mlp = {x:0,y:0}; // Mouse Last Position
    function documentHandler(){
        var $current = this === document ? $(this) : $(this).contents();
        $current.mousemove(function(e){jQuery.mlp = {x:e.pageX,y:e.pageY}});
        $current.find("iframe").load(documentHandler);
    }
    $(documentHandler);
    $.fn.ismouseover = function(overThis) {  
        var result = false;
        this.eq(0).each(function() {  
                var $current = $(this).is("iframe") ? $(this).contents().find("body") : $(this);
                var offset = $current.offset();             
                result =    offset.left<=$.mlp.x && offset.left + $current.outerWidth() > $.mlp.x &&
                            offset.top<=$.mlp.y && offset.top + $current.outerHeight() > $.mlp.y;
        });  
        return result;
    };  
})(jQuery);

Então, em qualquer lugar do documento, você o chama assim e retorna verdadeiro ou falso:

$("#player").ismouseover()

Eu testei no IE7 +, no Chrome 1+ e no Firefox 4 e está funcionando corretamente.


Eu respondi isso em outra pergunta, com todos os detalhes que você pode precisar:

Detectar IF pairando sobre o elemento com jQuery (tem 99 votos positivos no momento da escrita)

Basicamente, você pode fazer algo como:

var ishovered = oi.is(":hover");

Isso funciona apenas se oi for um objeto jQuery contendo um único elemento. Se houver vários elementos correspondidos, você precisará aplicar a cada elemento, por exemplo:

var hoveredItem = !!$('ol>li').filter(function() { return $(this).is(":hover"); });
                  // not .filter(':hover'), as we can't apply :hover on multiple elements

Isso foi testado a partir do jQuery 1.7.


Graças a vocês dois. Em algum momento eu tive que desistir de tentar detectar se o mouse ainda estava sobre o elemento. Eu sei que é possível, mas pode exigir muito código para realizar.

Demorei um pouco, mas peguei as duas sugestões e inventei algo que funcionaria para mim.

Aqui está um exemplo simplificado (mas funcional):

$("[HoverHelp]").hover (
    function () {
        var HelpID = "#" + $(this).attr("HoverHelp");
        $(HelpID).css("top", $(this).position().top + 25);
        $(HelpID).css("left", $(this).position().left);
        $(HelpID).attr("fadeout", "false");
        $(HelpID).fadeIn();
    },
    function () {
        var HelpID = "#" + $(this).attr("HoverHelp");
        $(HelpID).attr("fadeout", "true");
        setTimeout(function() { if ($(HelpID).attr("fadeout") == "true") $(HelpID).fadeOut(); }, 100);
    }
);

E então, para fazer este trabalho em algum texto, isso é tudo que tenho que fazer:

<div id="tip_TextHelp" style="display: none;">This help text will show up on a mouseover, and fade away 100 milliseconds after a mouseout.</div>

This is a <span class="Help" HoverHelp="tip_TextHelp">mouse over</span> effect.

Juntamente com um monte de CSS extravagante, isso permite algumas dicas muito agradáveis ​​de ajuda do mouseover. By the way, eu precisava do atraso no mouseout por causa de pequenas lacunas entre caixas de seleção e texto que estava causando a ajuda a piscar enquanto você move o mouse. Mas isso funciona como um encanto. Eu também fiz algo semelhante para os eventos de foco / desfoque.


No jQuery você pode usar .is (': hover'), então

function IsMouseOver(oi)
{
   return $(oi).is(':hover');
}

agora seria a maneira mais concisa de fornecer a função solicitada no OP.

Nota: O acima não funciona no IE8 ou inferior

Como alternativa menos sucinta que funciona no IE8 (se eu posso confiar no IE8 do IE9), e faz isso sem acionar $(...).hover(...) todo lugar, nem requer conhecer um seletor para o elemento (nesse caso, a resposta de Ivo é mais fácil):

function IsMouseOver(oi)
{
    return oi.length && 
           oi.parent()
             .find(':hover')
             .filter(function(s){return oi[0]==this})
             .length > 0;
}

Você pode testar com jQuery se qualquer div filho tiver uma determinada classe. Então, aplicando essa classe quando você passa o mouse sobre uma determinada div, você pode testar se o mouse está sobre ela, mesmo quando você passa o mouse sobre um elemento diferente na página. Muito menos código dessa maneira. Eu usei isso porque eu tinha espaços entre divs em um pop-up, e eu só queria fechar o pop up quando saía do pop up, não quando eu estava movendo o mouse sobre os espaços no pop up. Então, eu chamei uma função mouseover no div do conteúdo (que acabou com o pop-up), mas isso só acionava a função close quando eu passava o conteúdo do div, E estava fora do pop up!

$(".pop-up").mouseover(function(e)
    {
    $(this).addClass("over");
    });

$(".pop-up").mouseout(function(e)
    {
    $(this).removeClass("over");
    });


$("#mainContent").mouseover(function(e){
            if (!$(".expanded").hasClass("over")) {
            Drupal.dhtmlMenu.toggleMenu($(".expanded"));
        }
    });


Você pode usar is(':visible'); em jquery E por $ ('. item: hover') está funcionando no Jquery também.

este é um snnipet de código htm:

    <li class="item-109 deeper parent">
<a class="root" href="/Comsopolis/index.php/matiers"><span>Matiers</span></a>
<ul>
<li class="item-110 noAff">
<a class=" item sousMenu" href="/Comsopolis/index.php/matiers/tsdi">
<span>Tsdi</span>
</a>
</li>
<li class="item-111 noAff">
<a class="item" href="/Comsopolis/index.php/matiers/reseaux">
<span>Réseaux</span>
</a>
</li>
</ul>
</li>

e este é o código JS:

$('.menutop > li').hover(function() {//,.menutop li ul

    $(this).find('ul').show('fast');

},function() {
    if($(this).find('ul').is(':hover'))
    $(this).hide('fast');

});

 $('.root + ul').mouseleave(function() {
    if($(this).is(':visible'))
    $(this).hide('fast');

});

isso que eu estava falando :)


Você pode usar os eventos mouseenter e mouseleave do jQuery. Você pode definir um sinalizador quando o mouse entra na área desejada e desmarca o sinalizador quando sai da área.


AVISO: is(':hover') está obsoleto no jquery 1.8+. Veja este post para uma solução.

Você também pode usar esta resposta: https://.com/a/6035278/8843 para testar se o mouse está em um elemento:

$('#test').click(function() {
    if ($('#hello').is(':hover')) {
        alert('hello');
    }
});




mouseover