使鼠标光标自定义图像更改onclick

Make mouse cursor custom image change onclick

首先，我正在建立一个关于货物的网站。有 html 编辑器，但我不认为它与网站构建器本身配合得很好。

我希望我的自定义图像鼠标光标图像在单击时发生变化。我在这里遇到了三个问题：

  1. 我无法将默认光标设置为图像。 （它在 cargo 中是成功的，但我不知道如何在 html 编辑器上做到这一点。）
  2. 我不知道如何将光标更改为其他图像。
  3. 我希望它能在我的整个网站上实现，而不仅仅是单个文本或图像。

我会简单地使用 CSS 和 JavaScript 的组合。

CSS class 使用关键字 fallback 声明适当的游标定义。然后添加一个简单的 onmousedown 事件来触发第二个 CSS class 的添加，它声明了一个覆盖游标定义。添加第二个 onmouseout 事件以删除第二个 class 单击时添加的事件。

/* keyword fallback example: use pointer, if hand.png doesn't exist */
.cursor-hand {
  cursor: url(hand.png), pointer;
}

给你！ 做起来很简单：

只需将 cursor 属性 写入您想要的任何选择器，当然对于整个网站 html {...}。

html {
  background-color: lightgray;
  cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"), auto;
}

<html>

</html>

还有很多默认游标： 您可以在这里查看它们：https://codepen.io/chriscoyier/pen/uCwfB