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

Question

我希望能够在图像悬停时使用双箭头字符作为光标。我可以只添加一个图像作为自定义光标吗？

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

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

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