How to detect co-ordinates of mouse pointer over a div

Question

Suppose there is a DIV with the following properties:

top:100;
left:100;
height:200;
width:200;

Now, when i position the mouse pointer in the browser at co-ords(105,210), it means that the mouse pointer is on the div at (5, 110). So this is the thing that i want to calculate using jQuery. Can anyone help me with some code suggestions?

Please notice that you always need to add a unit to the CSS-properties top, left, height and with. In this case you would need to add a 'px'. (I'm posting this as a comment because its not related to the question.) — anroesti, May 28 '11 at 15:59
http://stackoverflow.com/questions/1133807/mouse-position-using-jquery-outside-of-events — Jared Farrish, May 28 '11 at 16:01
@andre_roesti: i forgot to mention the PXs. anyways, this question is more related to jQuery. The properties were just mentioned for reference. — Sujit Agarwal, May 28 '11 at 16:04

score 1 · Accepted Answer · answered May 28 '11 at 16:05

1

Just subtract the properties offsetLeft of your DIV from pageX and offsetTop from pageY.

$(document).mousemove( function(e) {
    var x = e.pageX - $('#example').offsetLeft;
    var y = e.pageY - $('#example').offsetTop;
}

answered May 28 '11 at 16:05

anroesti

11,053
3
22
33

How to detect co-ordinates of mouse pointer over a div

1 Answers1