使用 CSS 为鼠标光标指定颜色

Question

如何为网页中的鼠标光标指定颜色？

任何人都可以建议我使用任何技术（例如 HTML、CSS、JavaScript）来做这件事吗？

Answer 1

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

演示包含一个用形状绘制的简单光标，但这也可以很容易地是图像、视频等（画布支持的一切）。

Fiddle （更新 5/2016 for Firefox - 从文档移动到元素） 。

注意：当光标像在本演示中那样频繁更改时，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';
}

Answer 2

使用图像和 CSS cursor属性，我在这里看不到任何 JavaScript 的需要......

演示

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

---

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

Answer 3

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

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

Answer 4

直到今天我都使用自己的光标。 标准箭头的蓝色版本。 带有 alpha 透明阴影的 PNG 文件。 我爱它。 但是现在我升级到 4K，PNG 逻辑上不会缩放，所以它看起来很小。 有什么解决办法吗？ 现在我使用十字准线，因为我受不了那个手形光标。

有这个： cursor: url(img/pointer_blue.png),auto;

现在是：光标：十字准线；