使用jQuery在div的10px中检测鼠标悬停

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.

Answer 1

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/