Question

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

任何人都可以建议我使用任何技术来实现这一目标，例如： HTML，CSS，JavaScript？

Answer 1

使用图像和CSS cursor属性，我认为没有任何JavaScript需要......

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

如评论所述，我使用了auto，这只是default cursor，只是因为您的图片无法加载，就像我们声明多个字体系列一样。

Answer 2

添加动态添加游标而不提供图像，但在客户端使用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 3

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

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

Answer 4

我用自己的光标直到今天。蓝色版标准箭头。带有alpha透明阴影的PNG文件。我爱它。但现在我升级到了4K，而且PNG在逻辑上不会扩展，所以看起来很小。对此有何解决方案？现在我使用十字准线，'因为我无法忍受那个手形光标。

有这个：cursor：url（img / pointer_blue.png），auto;

现在是：cursor：crosshair;

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

4 个答案: