9

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

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

知道怎么做吗？

4

6 回答 6

8

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

body {
    cursor: URL(images/cursorimage.cur); /* IE */
    cursor: URL(images/cursorimage.gif);
}
于 2012-09-11T11:24:15.087 回答
3

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

起初我误解了这一点，但在阅读了这篇评论之后，事情变得更清楚了。

您可以使用 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)";
    }
}
于 2012-09-11T12:09:04.160 回答
2

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

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

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

显然 Internet Explorer 只支持 .cur 文件

更多信息

于 2012-09-11T11:20:01.850 回答
1

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

body {
  cursor: url("mouseSm.png"), auto !important;
}
于 2017-02-26T20:39:56.830 回答
0

cursor 可以在这里找到选项 http://www.echoecho.com/csscursors.htm以 获取您可以使用的图像

cursor:url(uri)
于 2012-09-11T11:20:39.320 回答
0

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

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

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

于 2012-09-11T13:32:04.270 回答