JavaScript如何将鼠标光标更改为图像？答案

【问题标题】：JavaScript how to change mouse cursor to an image?JavaScript如何将鼠标光标更改为图像？
【发布时间】：2012-06-07 15:36:50
【问题描述】：

我看过一些示例，您可以将其更改为操作系统具有的预设图像；示例：

$('body').css('cursor', 'wait');

但是我自己的 /img/my_image.png 怎么样？

感谢您的帮助。

【问题讨论】：

是 [this][1] 您在寻找什么？如果是这样，则应将其标记为重复 [1]：stackoverflow.com/questions/336925/custom-cursor-image-css
可能。我看到代码“a.heroshot img { cursor:url(/img/layout/backgrounds/moz-zoom.gif), -moz-zoom-in; }”，但我不确定如何实现它。我现在拥有的是一个按钮，当点击时，我有一个处理它的函数。在该函数中，我想将光标更改为图像，但我不确定如何使用此代码。

标签： javascript jquery html image mouse

【解决方案1】：

您可以通过在 CSS 中指定一个 url：

div {
    cursor: url(smiley.gif), url(myBall.cur), auto;
}

见http://www.w3schools.com/cssref/pr_class_cursor.asp

【讨论】：

呃... w3schools。有不同的参考吗？不过 +1。
嘿，这是否意味着每当我的鼠标在这个特定的 DIV 内时，光标会有所不同？另外，我没有 .cur 文件，我只有一个 .png 图像 --- 编辑：是否只编辑包含视图（div、body 等）的 CSS？
据我了解，您应该也可以使用您的 png。只要确保它是有效的。是的，就是这个想法（所以你可以为body 标签做这件事）。
从来没有...为什么 w3schools 被认为是一个不好的参考？

【解决方案2】：

我通常不链接外部文章，但这篇文章可以满足您的需求。我已经在这里复制了相关的东西以供坚持。

#dragMe {
    cursor: url('../cursors/customMoveCursor.cur'),     /* Modern browsers    */
            url('cursors/customMoveCursor.cur'),        /* Internet Explorer  */
            move;                                       /* Older browsers     */
}

信用：http://www.useragentman.com/blog/2011/12/21/cross-browser-css-cursor-images-in-depth/

在制作自定义光标时不要忘记考虑可访问性！干杯:)

【讨论】：

【解决方案3】：

设置自定义光标（或默认光标作为后备）的 Jquery 方式：

$('selector').css({'cursor': 'url(/cursors/customMoveCursor.cur), default'});

【讨论】：