javascript 使用 CSS 为鼠标光标指定颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18779354/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
assign color to mouse cursor using CSS
提问by Rajesh Paul
How can I assign color to the mouse cursor in a web-page?
如何为网页中的鼠标光标指定颜色？
Can anyone suggest me a way to do it using any of the technologies e.g. HTML, CSS, JavaScript?
任何人都可以建议我使用任何技术（例如 HTML、CSS、JavaScript）来做这件事吗？
采纳答案by Mr. Alien
Use an image along with CSS cursorproperty, I don't see any need of JavaScript heere...
使用图像和 CSScursor属性，我认为这里不需要 JavaScript...
div {
cursor: url(YOUR_IMAGE_URL), auto;
}
As commented, I've used autowhich is nothing but default cursorjust incase your image fails to load, exactly like we declare multiple font families.
正如评论的那样，我使用了auto这default cursor只是为了防止您的图像无法加载，就像我们声明多个字体系列一样。
回答by
Just to add the possibility to dynamically adding a cursor without providing an image but generating it on client with JavaScript and Canvas.
只是为了增加动态添加光标的可能性，而不提供图像，而是使用 JavaScript 和 Canvas 在客户端生成它。
Demo contains a simple cursor drawn with shapes, but this could just as easily have been images, video and so forth (everything a canvas support).
演示包含一个用形状绘制的简单光标，但这也可以很容易地是图像、视频等（画布支持的一切）。
Fiddle(updated 5/2016 for Firefox - moved from document to element).
Fiddle（更新 5/2016 for Firefox - 从文档移动到元素）。
Note: FireFox has problem when the cursor is changed so frequent as in this demo - updated to change only once per second. FF clears the cursor when setting a new image but since the new image needs to be decoded it shows the default in the mean time. Chrome waits until the image is decoded before switching over.
注意：当光标像在这个演示中那样频繁更改时，FireFox 会出现问题 - 更新为每秒仅更改一次。FF 在设置新图像时清除光标，但由于新图像需要解码，因此同时显示默认值。Chrome 会等待图像解码后再切换。
In any case it is merely to show it can be done using canvas - test demo using Chrome and don't change mouse so often :-).
在任何情况下，这只是为了表明它可以使用画布来完成 - 使用 Chrome 测试演示，不要经常更换鼠标:-)。
The animation loop which here changes color randomly to demonstrate:
这里随机变色的动画循环演示：
function loop() {
var color = 'rgb(' + ((255 * Math.random())|0) + ','
+ ((255 * Math.random())|0) + ','
+ ((255 * Math.random())|0) + ')';
makeCursor(color);
setTimeout(loop, 1000);
}
The cursor maker:
光标制造商：
function makeCursor(color) {
// create off-screen canvas
var cursor = document.createElement('canvas'),
ctx = cursor.getContext('2d');
cursor.width = 16;
cursor.height = 16;
// draw some shape for sake of demo
ctx.strokeStyle = color;
ctx.lineWidth = 2;
ctx.moveTo(2, 10);
ctx.lineTo(2, 2);
ctx.lineTo(10, 2);
ctx.moveTo(2, 2);
ctx.lineTo(30, 30)
ctx.stroke();
// set image as cursor (modern browsers can take PNGs as cursor).
element.style.cursor = 'url(' + cursor.toDataURL() + '), auto';
}
回答by maikelsabido
You should create/look for a customized cursor. Then, use the cursorCSS property to include it on your website.
您应该创建/查找自定义光标。然后，使用cursorCSS 属性将其包含在您的网站上。
There's a tutorial for this here: http://www.axialis.com/tutorials/use-cursors-to-customize-websites.htm
这里有一个教程：http: //www.axis.com/tutorials/use-cursors-to-customize-websites.htm
回答by Ole S?rensen
I used my own cursor up until today. Blue version of the standard arrow. PNG file with alpha transparent shadow. I loved it. But now I upgraded to 4K, and the PNG logically won't scale, so it appears tiny. Any solution for this? For now I use the crosshair, 'cos I can't stand that hand cursor.
直到今天我都使用自己的光标。标准箭头的蓝色版本。带有 alpha 透明阴影的 PNG 文件。我爱它。但是现在我升级到 4K，PNG 逻辑上不会缩放，所以它看起来很小。有什么解决办法吗？现在我使用十字准线，因为我受不了那个手形光标。
Had this: cursor: url(img/pointer_blue.png),auto;
有这个： cursor: url(img/pointer_blue.png),auto;
Now it's: cursor: crosshair;
现在是：光标：十字准线；
