如何將鼠標指針更改為在Javascript中單擊的圖像

Question

我正在做一個植物生長模擬器來教孩子們關於植物的知識。 有一些有關更改指針的線程，例如： JavaScript如何將鼠標光標更改為圖像？ 在C＃中單擊圖像時如何將鼠標指針更改為圖像

但是，關注點有所不同。 我要做的是將鼠標指針本身更改為被單擊的圖像，這樣它會給出類似以下內容：

1. 單擊邊欄中的鏟子，鼠標指針變為鏟子
2. 然后孩子們在他們想為其植物挖洞的地方單擊，然后在他們點擊的地方出現土堆的圖像
3. 他們返回到側邊欄並單擊種子，鼠標指針將從鐵鍬變成一袋種子

我不知道我是否應該嘗試在click事件上更改指針或使該指針不可見並向其添加所選圖像的副本，因此我希望對此有所幫助。

Answer 1

在JS中，只需執行以下操作：

document.body.style.cursor = "url([url]), pointer"

例如：

document.body.style.cursor = "url(http://bringerp.free.fr/Files/RotMG/cursor.gif), pointer"

要替換為默認光標，請將光標樣式更改為空：

document.body.style.cursor = ""

Answer 2

要按需更改鼠標光標，您必須將點擊偵聽器添加到相關元素。 例如：

 const src = 'https://www.gravatar.com/avatar/2f2eaccac43433e0bdd0b9f795286423?s=32&d=identicon&r=PG&f=1'; const docStyle = document.body.style; document.querySelector('img').addEventListener('click', () => { if (!docStyle.cursor) docStyle.cursor = `url('${src}'), default`; else docStyle.cursor = null; }); 

 div { height: 300px; background-color: green; } 

 <div> <img src="https://www.gravatar.com/avatar/2f2eaccac43433e0bdd0b9f795286423?s=32&d=identicon&r=PG&f=1"> </div>