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

Question

所以我喜欢这样的 div:

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

可以使用 javascript 或 jquery 并且不使用任何附加标签来检测用户何时越过这个 10px 的区域

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

我知道如何使用附加标签来制作它，但我想知道是否有更好的选择，仅使用 javascript。

Answer 1

您可以在 JavaScript 中附加事件处理程序而无需任何其他标记。例如，如果您有这样的 DIV:

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

在纯 JavaScript 中，您可以像这样附加 onmousemove:

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

当您将鼠标移到 DIV 上时，如果您移动到右侧 10px 以内，它将变为绿色。否则它会是红色的。

现场演示:http://jsfiddle.net/25SXW/3/