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

Question

所以我喜欢这样的div：

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

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

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

我知道如何使用附加标签来制作它，但我想知道是否有更好的选择，只使用 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/