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

当鼠标输入body元素的矩形（50,50,100,100）（数字以像素为单位）时，我想将光标从default更改为pointer。如何根据鼠标位置更改光标？

我知道我可以定义一个div，将它放在这个位置，并设置cursor: pointer;就可以了，但是我正在寻找某种方法，而没有定义div。

我想是这样的：

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

这是可能做到这一点？

来源

2010-07-12 Misha Moroshko

改变光标在鼠标移动的容器 – jantimon 2010-07-12 13:13:02

尝试这样的事情（虽然未经测试）：

$("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"); 
});

您可能需要使用全局变量，虽然，而不是仅仅底肥每次性能原因的属性。您也可能想要考虑使用CSS类，而不是直接在JS中设置样式。

更新：为什么我想到的style代替css ... :(

来源

2010-07-12 13:14:47 MiffTheFox

代替.style（“光标”，“默认”）我通常使用.style。（“cursor”，“”），以防在页面上实际使用“默认”光标。 – Sparafusile 2010-07-12 13:21:54

'.style（）无论如何调用它都不起作用，因为它不是jQuery方法。正在寻找'.css（）' – jAndy 2010-07-12 13:24:20

你应该在这里使用'.css（）'而不是'.style（）'，尽管它不能确保这样做。例如，如果你在一个元素之上有一个游标定义，这是一个比''有更多的本地风格......但这应该工作得很好。 – 2010-07-12 13:27:16

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

回答

相关问题