jQuery: How to check if the mouse is over an eleme

Question

I have a deferred function that binds a mouseenter event:

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

The problem is the mouse might already be over the element when the load event fires, hence before the mouseenter event was bound.
I can get around this by putting some code at the end of the page load handler to do a one-time check if the mouse is inside the element and trigger the mouseenter event manually:

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

How can I check if the mouse is over the element in the load event?

I tried $container.is(':hover') but it doesn't work.

Answer 1

Mouseover event does exactly what you want.

If the .conteiner does not exist in time you attach the mouseover event (is added dynamically in the future) you have to use .live method to attach the event.

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

It will work also when the mouse is already on the position, where the new element appears. Example here!

For jQuery 1.7+ you should use .on method instead as the .live method is deprecated. Example here!

Answer 2

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

Answer 3

Best way to do this is to get the left, right, top, and bottom offset of the element and see if the mouse position lies anywhere between those values.

Example.

Put your mouse over the div the first time it loads. Then refresh the page (click F5 so you don't have to move the mouse). When the page loads fully next time, it should alert with "Hover!" even if you haven't moved your mouse.

Or an even easier way. Just check the e.target.id of the mousemove event (which apparently fires once the page loads, even without moving the mouse) against the id of the element, like so:

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

Example (do the same steps as above).

Answer 4

I went with the css hover solution in Detect mouse hover on page load with jQuery because it doesn't require the mousemove event.

Answer 5

With jQuery 1.7+ you're going to want to use .on(): http://api.jquery.com/on/

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

.live is deprecated. You could also put any other events in .on as well, depending on what you need. :hover doesn't work because it only works with specific elements and it's css based.

Using this in conjunction with an offset detection approach for before the page finishes loading will get you where you want to be.

Answer 6

i dont test it yet but think you want like this...

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"))