jQuery: ¿Cómo comprobar si el ratón está sobre un elemento

Question

Tengo una función diferida que se une a un evento MouseEnter:

$(window).load(function(e) { 
    var $container = $('.container'); 
    $container.mouseenter(function(e) { 
    //do something 
    }); 
    ... 
}); 

El problema es el ratón podría estar ya sobre el elemento cuando se activa el evento de carga, por lo tanto, antes de que el evento del mouseenter estuviera vinculado.
puedo evitar esto poniendo un poco de código al final del manipulador de carga de la página para hacer una verificación de una sola vez si el ratón está dentro del elemento y desencadenar el evento MouseEnter manualmente:

// check if the mouse is inside $container 
if(mouse is inside $container) 
    $container.mouseenter(); 

¿Cómo puedo comprobar si el mouse está sobre el elemento en el evento de carga?

Intenté $container.is(':hover') pero no funciona.

Answer 1

Fui con la solución css hover en Detect mouse hover on page load with jQuery porque no requiere el evento mousemove.

Answer 2

Mouseover evento hace exactamente lo que desea.

Si el .conteiner no existe a tiempo, se adjunta el evento mouseover (se agrega dinámicamente en el futuro) tiene que usar el método .live para adjuntar el evento.

$(".conteiner").live("mouseover", function() { 
    alert("hovered!"); 
}) 

Funcionará también cuando el ratón está ya en la posición, en la que aparece el nuevo elemento.Example here!

Para jQuery 1.7+, en su lugar, debe utilizar el método .on ya que el método .live está en desuso. Example here!

Answer 3

$('.container').mouseover(function(e) { 
    //do something 
}); 

Answer 4

mejor manera de hacer esto es conseguir la izquierda, derecha, arriba, y el desplazamiento del elemento de fondo y ver si la posición del ratón se encuentra en cualquier lugar entre esos valores.

Example.

Coloque su mouse sobre la div la primera vez que se carga. A continuación, actualice la página (haga clic en F5 para que no tenga que mover el mouse). Cuando la página se carga completamente la próxima vez, debe alertar con "¡Pase el ratón!" incluso si no has movido tu mouse.

O una manera aún más fácil. Sólo tienes que comprobar la e.target.id del evento MouseMove (que al parecer se activa una vez se carga la página, incluso sin mover el ratón) contra la id del elemento, así:

$(document).mousemove(function(e){ 
    if(e.target.id === 'hoverTest'){ 
     alert("Hovered!"); 
    } 
}); 

Example (hacer los mismos pasos que el anterior).

Answer 5

yo no probarlo todavía, pero creo que usted quiere así ...

function checkMouseCollision(obj) { 
    var offset = obj.offset(); 
    objX= offset.left; 
    objY=offset.top; 
    objW=obj.width(); 
    objH=obj.height(); 

    var mouseX = 0; 
    var mouseY = 0; 
    $().mousemove(function(e) { 
    mouseX = e.pageX; 
    mouseY = e.pageY; 
    }); 

    if((mouseX>objX&&mouseX<objX+objW)&&(mouseY>objY&&mouseY<objY+objH)){ 
     alert("hovered")  
    }; 
}; 
checkCollision($(".box")) 

Answer 6

con jQuery 1.7+ vas a querer usar .on(): http://api.jquery.com/on/

$(document).ready(function(){ 
    $('body').on("mouseover", "your_element_selector_here", function() { 
     // do stuff here 
    }); 
}); 

.live es obsoleto. También puede poner cualquier otro evento en .on también, dependiendo de lo que necesite. : el desplazamiento no funciona porque solo funciona con elementos específicos y está basado en CSS.

Usar esto junto con un enfoque de detección de desplazamiento para antes de que la página termine de cargarse lo llevará a donde quiere estar.