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

Question

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

javascripthtmlcssmouse-cursorcustom-cursor

18

我怎样才能为网页中的鼠标指针分配颜色？

有人能否建议一种方法，使用任何技术，例如HTML、CSS、JavaScript来实现它？

- Rajesh Paul

3个回答

17

使用CSS的cursor属性和图片，这里不需要JavaScript...

演示

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

如评论所述，我已经使用了auto，它仅仅是默认光标，以防止您的图片无法加载，就像我们声明多个字体族一样。

- Mr. Alien

"auto" 是用来做什么的？ - MarsOne

2

@NathanLee 我从不为IE构建任何东西，因为它总是对所有事情都很糟糕，尽管有polyfills可用 :) - Mr. Alien

我同意。但它至少应该在IE8上运行。无论如何，信息很有用 :) - @Mr.Alien - Nitesh

1

@Harry，您无法更改系统光标，但是您可以通过使用画布为自定义光标提供图像来动态更改其颜色。 - user1693593

谢谢@Ken-AbdiasSoftware，我之前不知道这个。也许我应该做更多的分析 :) - Harry

1

@Mr.Alien：感谢您提供的另一种方法。至少我有了一个解决方案。 - Rajesh Paul

1

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

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

- maikelsabido

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1693593 · Accepted Answer

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

演示包含一个用形状绘制的简单光标，但这同样可以是图像、视频等（Canvas支持的所有内容）。

Fiddle （已于2016年5月更新适用于Firefox - 从文档移至元素）。

注意：Firefox在光标频繁更改时存在问题，如此演示中所示-更新为每秒更改一次。Firefox在设置新图像时会清除光标，但由于需要解码新图像，因此在此期间显示默认值。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';
}