使用HTML/UTF-8字符作为光标

Question

我希望当鼠标悬停在图片上时，能够使用双箭头字符作为光标。我只能添加一张图片作为自定义光标吗?

cursor: url(images/my-cursor.png), auto;

http://designerstoolbox.com/designresources/html/

- user2252219

---

做好你的研究。https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor - matthewpavkov

是的，光标只能是图像。您可以制作带有字符的 PNG 图像。 - Phiter

你也可以用Javascript实现这个。 - RobertAKARobin

Answer 1

这里有一个使用行内SVG的解决方案：

您可以根据需要为文本（字符）调整高度和宽度。您可能还想更改文本的y轴以适应不同的字符。

html {height:100%;}
body {width:100%;height:100%;margin: 0;
  
  /* only this is relevant */
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="30" style="font-size: 20px;"><text y="15">¶</text></svg>'), auto;
  
}

虽然这是纯CSS，但你也可以使用HTML5-Canvas并用JavaScript在上面绘制文本：

var canvas = document.createElement("canvas")
canvas.width = 10
canvas.height = 15
var context = canvas.getContext("2d")
context.font = "20px 'sans serif'"
context.fillText("¶", 0, 13)
document.body.style.cursor = "url('" + canvas.toDataURL() + "'), auto"

html {height:100%;}
body {width:100%;height:100%;margin:0;}

- CoderPi

---

很酷，但你能展示一下如何使用canvas作为url()属性来设置光标的例子吗？ - Ruan Mendes

啊，谢谢，我刚才有个脑子抽筋，现在我记起来我以前用过它了。https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL - Ruan Mendes

太棒了，我刚想编辑你的答案加上同样的例子，但是我没有加上 auto，所以它没起作用 :p - Ruan Mendes

你也可以很容易地使用JavaScript中的SVG技巧：var repl_cursor='url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="30" style="font-size: 20px;"><text y="15">REPL</text></svg>\'), auto'; document.body.style.cursor=repl_cursor.replace('REPL','¶'); - Chinoto Vokro