如何根據鼠標位置更改光標？

當鼠標輸入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

如何根據鼠標位置更改光標？

回答

相關問題