使用HTML/UTF-8字符作为光标 [英] Using HTML / UTF-8 character's as cursor

问题描述

当图像悬停时，我希望能够使用双箭头字符作为光标.我只能将图像添加为自定义光标吗?

I'd like to be able use the double arrow characters as a cursor when an image is hovered. Can I only add an image as a custom cursor?

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

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

推荐答案

以下是带有嵌入式SVG的解决方案:

Here is a solution with an inline SVG:

您可以根据需要调整文本(字符)的高度和宽度.您可能还想更改不同字符的文本y.

you can adjust the height and width as you need for your Text (Character). You might also want to change the y of the text for diffrent chars.

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在其上绘制文本:

While this is pure CSS, you can also make a HTML5-Canvas and draw your text on it with 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;}

这篇关于使用HTML/UTF-8字符作为光标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！