Question

I have a big <div /> container that has an image as a background. When the user moves the cursor over that element I need to show an another <div /> that has information. I want this second one relative to the position of the cursor.

This is how far I am, I don’t know how to exactly fit it on the mouse pointer: http://jsfiddle.net/cyX2m/

Updated: The problem is the position, not the event.

Thank you in advance!

Answer 1

First, you just need to change event from mouseover to mousemove. Then you need to subtract the position of the element firing the event from the PageX/Y:

$("#big-area").bind("mousemove", function(e) {
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;

    $("#data").html('e.pageY: ' + y + ', e.pageX: ' + x);

    $("#helper").css('top', y).css('left', x).show();
});

Updated fiddle