Detect mouseover in 10px of div with jQuery

Question

So I have like a div like this:

------------------
------------------
------------------
------------------

It is possible with javascript or jquery and without using any aditional tags to detect when the user overs this area which is 10px

------------------
------------------
------------------
------------------

I know how to make it using aditional tags, but I would like to know if there is a better option, using only javascript.

Look at this: http://stackoverflow.com/questions/4249648/jquery-get-mouse-position-within-an-element — Smern, Sep 05 '13 at 00:27

Yuriy Galanter · Answer 1 · 2013-09-05T00:49:48.660

You can attach event handler in JavaScript without any additional tags. For example if you have a DIV like this:

<div id="xdiv" style="width:100px; height:100px; border: solid 1px black" />

in pure JavaScript you can attach onmousemove like this:

document.getElementById("xdiv").onmousemove = function(e) {
    var evt = e || event;

    if (this.offsetWidth - evt.offsetX > 10) {
        this.style.backgroundColor = "red"
    } else {
        this.style.backgroundColor = "green"
    }
}

When you move the mouse over DIV it will become green if you move within 10px of the right side. Otherwise it will be red.

Live demo: http://jsfiddle.net/25SXW/3/

Detect mouseover in 10px of div with jQuery

1 Answers1