Javascript 如何根据鼠标位置更改光标？

当鼠标进入

主体

元素（数字以像素为单位）的矩形（50、50、100、100）时，我想将光标从

默认

更改为

指针

我知道我可以定义一个

div

，把它放在这个位置，然后设置

游标：指针在上面，但我正在寻找一些不定义
div
的方法

我想说的是：

if (mousePosition inside rectangle) {
    change cursor to pointer
} else {
    change cursor to default
}

这可能做到吗？
尝试类似的方法（尽管未经测试）：

$（“body”）.mousemove（函数（e）{
如果（e.pageX>50&&e.pageY>50&&e.pageX<100&&e.pageY<100）
$（“body”）.css（“光标”、“指针”）；
其他的
$（“body”）.css（“游标”、“默认值”）；
});

但是，出于性能原因，您可能希望使用全局变量，而不是每次仅应用属性。您可能还希望研究如何使用CSS类，而不是直接在JS中设置样式

更新：为什么我认为
style
而不是
css
…：（
在mousemove.com上更改容器的光标，而不是.style（“cursor”，“default”），我通常使用.style（“cursor”，“cursor”），以防在页面上实际没有使用“default”光标。
.style（）将不起作用，无论您如何调用它，因为它不是jQuery方法。您正在寻找的是
.css（）`您应该使用
.css（）
而不是
.style（）
在这里，虽然它不能确保这将起作用。例如，如果您位于一个定义了光标的元素的顶部，这是一种比
更具地方性的样式…但这应该足够好。我的主要问题是
元素强制光标成为其他元素。请参阅此处：。有什么解决方法吗？
$("body").mousemove(function(e){
    if (e.pageX > 50 && e.pageY > 50 && e.pageX < 100 && e.pageY < 100)
        $("body").css("cursor", "pointer");
    else
        $("body").css("cursor", "default");
});