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

Question

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

任何人都可以建议我使用任何技术,如HTML,CSS,JavaScript吗？

Answer 1

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

Demo包含一个用形状绘制的简单光标,但这很容易就是图像,视频等等(画布支持的一切).

Fiddle (已更新5/2016用于Firefox - 从文档移动到元素).

注意:当光标像本演示中那样频繁更改时,FireFox会出现问题 - 更新为每秒只更改一次.FF在设置新图像时清除光标,但由于需要对新图像进行解码,因此在平均时间内显示默认值.Chrome会在切换之前等待图像解码.

在任何情况下,它只是表明它可以使用canvas进行 - 使用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 heere ...

演示

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

正如评论所说,我已经使用过auto哪个default cursor只是因为你的图像无法加载,就像我们声明多个字体系列一样.