Question

我正在做植物生长模拟器，教孩子们种植植物。有关于更改指针的线程，例如： JavaScript how to change mouse cursor to an image? How to change the mouse pointer to an Image when clicked on it in c#

然而，担忧是不同的。我想要做的是让鼠标指针本身更改为单击的图像，因此它将提供如下内容：

单击侧栏中的铲子，鼠标指针变为铲子
然后孩子们点击他们想为他们的植物挖洞的地方，他们点击的地方会出现污垢土堆的图像
他们回到边栏并点击种子，鼠标指针将从铲子变成一袋种子

我不知道是否应该尝试更改点击事件上的指针或使指针不可见并将所选图像的副本附加到其中，以便我对此有所帮助。

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

要根据需要更改鼠标光标，您必须向相关元素添加单击侦听器。例如：

＆＃13;

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;
});

＆＃13;

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

＆＃13;

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

＆＃13;

如何将鼠标指针更改为在Javascript中单击的图像

2 个答案: