使用HTML字符作为游标 [英] Using HTML character's as cursor

问题描述

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

$ b

  cursor：url（images / my- cursor.png），auto; b 
 
 
 $ b 
  http://designerstoolbox.com/designresources/html/  
解决方案
这是一个解决方案内联SVG： 
 
 
您可以根据需要调整文本（字符）的高度和宽度。您可能还想要更改不同字符的文本的y。
 
 
 
 
 
 
  html {height：100％;} body {width：100％ ;高度：100％;边距：0; / * only this is relevant * / cursor：url（'data：image / svg + xml; utf8，< svg xmlns =http://www.w3.org/2000/svgwidth =12height = 30style =font-size：20px;>< text y =15>< / text>< / svg>'），auto; }  

虽然这是纯CSS，但您也可以制作HTML5 - 使用JavaScript绘制您的文字：

var canvas = document.createElement（canvas）canvas.width = 10canvas.height = 15var 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;}

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/

解决方案

Here is a solution with an inline SVG:

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

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字符作为游标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！