使鼠标光标自定义图像在单击时更改

问题描述 投票：0回答：3

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

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

  1. 我无法将默认光标设置为图像。 （在 Cargo 中成功，但我不知道如何在 html 编辑器上执行此操作。）
  2. 我不知道如何将光标更改为其他图像。
  3. 我希望这能够在我的整个网站上实现，而不仅仅是单个文本或图像。
javascript html css mouse
3个回答
1
投票

给你！ 做起来很简单：

只需将 

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

0
投票

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

CSS 类使用关键字后备声明适当的游标定义。 然后添加一个简单的 onmousedown 事件来触发第二个 CSS 类的添加，该类声明了重写光标定义。 添加第二个 onmouseout 事件以删除单击时添加的第二个类。

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

我尝试了使用不同图像的相同代码，即https://cp.cute-cursors.com/uploads/cursors/283/1.png而不是 happy.png 并且它不起作用，有谁知道为什么它不起作用工作？

        html {
  background-color: lightgray;
  /* cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"), auto; */
  cursor: url("https://cp.cute-cursors.com/uploads/cursors/283/1.png"), auto;
}
<html>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.