使用 CSS 为鼠标光标分配颜色答案

【问题标题】：assign color to mouse cursor using CSS使用 CSS 为鼠标光标分配颜色
【发布时间】：2013-09-13 06:07:05
【问题描述】：

如何为网页中的鼠标光标分配颜色？

谁能给我建议一种使用任何技术的方法，例如HTML、CSS、JavaScript？

【问题讨论】：

标签： javascript html css mouse-cursor custom-cursor

【解决方案1】：

只是为了增加动态添加光标而不提供图像但在客户端使用 JavaScript 和 Canvas 生成它的可能性。

Demo 包含一个用形状绘制的简单光标，但这也可以是图像、视频等（所有画布都支持）。

Fiddle （针对 Firefox 于 5/2016 更新 - 从文档移至元素）。

注意：当光标在这个演示中如此频繁地更改时，FireFox 会出现问题 - 更新为每秒仅更改一次。 FF 在设置新图像时会清除光标，但由于新图像需要解码，因此同时显示默认值。 Chrome 会等到图像被解码后再切换。

无论如何，这只是为了表明它可以使用画布完成 - 使用 Chrome 测试演示并且不要经常更换鼠标:-)。

这里随机变色的动画循环演示：

function loop() {

    var color = 'rgb(' + ((255 * Math.random())|0) + ','
                       + ((255 * Math.random())|0) + ','
                       + ((255 * Math.random())|0) + ')';
    makeCursor(color);

    setTimeout(loop, 1000);
}

光标制造商：

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

【讨论】：

+1 为您的努力 :) 和迪斯科光标.. 哈哈，顺便说一句，当您移动光标时默认光标显示，我在 ff 22
@Mr.Alien 谢谢。是的，FF 有点不稳定，可能是因为动画循环太紧了。但是对于正常使用我想这不会是一个问题，除非颜色一直像这里一样变化（更新css规则）
现在一切顺利，不能 +1 两次 ;) 但再次 +1 .. 它也修复了默认光标问题......虽然目前对画布的支持并不令人印象深刻，但这值得提前使用...
@Mr.Alien 画布支持实际上非常好（我现在主要使用画布）（caniuse.com/#feat=canvas）。但是 IE 是 um..special case，无论如何对于旧版本。
可以说是边界线案例，因为最近的浏览器版本都开始支持canvas了，谁在乎IE，简直就是蛋糕上的便便

【解决方案2】：

使用图像和 CSS cursor 属性，我认为这里不需要 JavaScript...

Demo

div {
   cursor: url(YOUR_IMAGE_URL), auto;
}

正如评论，我使用了auto，它只是default cursor，以防您的图像无法加载，就像我们声明多个字体系列一样。

【讨论】：

什么是“自动”？
@NathanLee 我从不为 IE 构建东西，因为它总是很糟糕，尽管可以使用 polyfill :)
我同意。但它至少应该适用于 IE8。无论如何，很好的信息:) - @Mr.Alien
@Harry 您无法更改 system 光标，但您可以通过使用画布为其提供图像来动态更改自定义光标的颜色.
@Mr.Alien：感谢您提供的替代方法。至少我有一个解决方案。

【解决方案3】：

您应该创建/查找自定义光标。然后，使用cursor CSS 属性将其包含在您的网站中。

这里有一个教程：http://www.axialis.com/tutorials/use-cursors-to-customize-websites.htm

【讨论】：