Question

当然，在JavaScript的帮助下。

Answer 1

最简单的方法是处理元素的onmouseover和onmouseout事件：

element.onmouseover = function (e)
{
    e = e || window.event;
    alert("You moused over "+element.outerHTML);
}
element.onmouseout = function (e)
{
    e = e || window.event;
    alert("You moused out of "+element.outerHTML);
}

如果元素是这些坐标的最顶层元素，您也可以使用document.elementFromPoint(x, y)：

var mouseX = 0, mouseY = 0;
document.documentElement.onmousemove = function (e)
{
    e = e || window.event;
    mouseX = e.clientX;
    mouseY = e.clientY;
}
function getElementUnderMouse()
{
    return document.elementFromPoint(mouseX, mouseY);
}

显然，如果你有一些阻止onmousemove事件传播/冒泡的元素，鼠标位置可能不正确，同时将鼠标悬停在这些元素上。

Answer 2

onMouseover，onMouseout事件开火。

Answer 3

在下面的示例中，如果将鼠标悬停在div上，它将变为蓝色。

如果你将onmouseover放置到完整的BODY，那么你可以检查一个条件（ID，className，tagName，...），如果你想对你正在覆盖的元素做一些事情。

<html>
<head>
    <title>so</title>
</head>
<body>
    <div>div 1</div>
    <div>div 2</div>
    <div>div 3</div>
    <script>
        document.body.onmouseover = function(ev){
            var elm = ev.target || ev.srcElement;
            if(elm.tagName === 'DIV'){
                elm.style.backgroundColor = "#DEF";
            }
        };
    </script>
</body>
</html>

我怎么知道鼠标指针是否在页面上的特定元素上？

3 个答案: