如何更改指针的默认图像答案

【问题标题】：How to change default image for pointer如何更改指针的默认图像
【发布时间】：2012-09-11 11:18:07
【问题描述】：

我需要更改光标的默认图像：带有一些自定义图像的指针。

创建一个类并为光标指定悬停值不是一个有效的解决方案，因为我必须将该类添加到所有已经制作的元素中，你知道吗...不是最佳的。也不能将该类添加到正文中，因为带有 cursor:pointer 的子项会覆盖它。

知道怎么做吗？

【问题讨论】：

【解决方案1】：

您可以为body 元素创建一个自定义cursor，除非被以后的选择器覆盖，否则它将作为默认值：

body {
    cursor: URL(images/cursorimage.cur); /* IE */
    cursor: URL(images/cursorimage.gif);
}

【讨论】：

我不需要光标以某种方式查看。我需要光标以某种方式查看何时是指针。这会将光标更改为某物。如果是指针仍然是手。
在这种情况下，我认为您将无法为所有元素指定特定的光标图像，这会导致光标成为pointer。所以，a、button {/*...*/}` 等等。
这很糟糕：|正是我试图逃避的。
是的，这并不理想，但我不知道有什么方法可以在 CSS 中表达“pointer 光标应该看起来像这样”。即使在 JavaScript 中，我认为它本质上也必须以相同的方式完成。 =/
@zozo 在这种情况下，请查看我对使用 JavaScript 的解决方案的回答。

【解决方案2】：

我需要更改光标的默认图像：带有一些自定义图像的指针。

一开始我误解了，但是看了this comment之后，事情就清楚了。

您可以使用 jQuery/JavaScript 轻松完成此操作。首先，这里是稍微简单的 jQuery 版本：

$("*").each(function() {
    var cur = $(this);
    if(cur.css("cursor") == "pointer") {
       cur.css("cursor", "url(newcursor.ico)");
    }
});

纯 JavaScript 版本：

var elms = document.getElementsByTagName("*");
var n = elms.length;
for(var i = 0; i < n; i ++) {
    if(window.getComputedStyle(elms[i]).cursor == "pointer") {
        elms[i].style.cursor = "url(newcursor.ico)";
    }
}

【讨论】：

是的。这似乎是我需要的。我对 js 似乎并不理想，但比其他方式更好。一个快速的问题......这不是说有点......处理器很昂贵（因为我似乎需要在鼠标移动时检查这个以检查悬停）？
@zozo 不，你不检查 mousemove，你只做一次。您会查找默认具有 pointer 光标的元素，并使用您的自定义光标代替。
是的，但是如果有一个指针悬停怎么办。那些不会在该搜索中找到。
@zozo 他们将通过该搜索找到。
那么酷……我试试看。

【解决方案3】：

是的，你可以像这样轻松地做到这一点

   .anyclass{
    cursor: URL(images/cursorimagefule.gif);
    }

图像文件必须为 32x32 或更小

显然 Internet Explorer 只支持 .cur 文件

more info

【讨论】：

不是投票，但问题确实明确指出：创建一个类并为光标指定悬停值不是一个有效的解决方案，因为我必须将该类添加到所有元素已经做好了。
不是 OP 要求的，refer to this。
尺寸限制加一！

【解决方案4】：

这些都不适合我。我不得不使用这种略有不同的语法。注意 lowercse 'url' 、路径周围的引号和添加的 !important。此外，任何尺寸都可以。

body {
  cursor: url("mouseSm.png"), auto !important;
}

【讨论】：

【解决方案5】：

与cursor 可以在这里找到选项 http://www.echoecho.com/csscursors.htm 对于图像，您可以使用

cursor:url(uri)

【讨论】：

【解决方案6】：

使用“cursor”属性与使用任何 CSS 属性相同——只需将其应用于所需的元素：

<style type="text/css">
body{
    cursor: url(mycursor.cur)
}
</style>

这会将网页的默认箭头光标改为自定义图像。

【讨论】：