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

Question

I have a deferred function that binds a mouseenter event:

$(window).load(function(e) {
  var $container = $(\'.container\');
  $container.mouseenter(function         


        

Answer 1

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 2

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

Answer 3

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

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

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 6

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!