Question

我的代码是这样的：

 <a href="javascript:void(0)" id="Pencil_a" class="Pencil"></a>

脚本：

<script type="text/javascript">
    $(document).ready(function () {
        $("#Pencil_a").click(function () {
            $("body").addClass("pencil_cursor");
        });
    });
</script>

式：

.Pencil
{
    background-image: url("images/globaleImg.png");
    background-position: -88px -415px;
    display: block;
    height: 15px;
    position: relative;
    width: 15px;
}
.pencil_cursor
{
    cursor:url("images/globaleImg.png") -88px -415px;
    display:block;
}

当我点击链接时，光标不会改变它的默认图像我做错了什么？

Answer 1

您需要添加cursor:url("images/globaleImg.png"),auto;

.pencil_cursor
{
    cursor:url("images/globaleImg.png"),auto;
    display:block;
}

see stackoverflow ques

JSFiddle

Answer 2

问题在于游标CSS中的px。 px不是必需的，只是数字。

更改;

cursor:url("images/globaleImg.png") -88px -415px;

要;

cursor:url("images/globaleImg.png") -88 -415;

仅供参考，X Y的合作伙伴是改变光标的热点，而不是图像的实际位置。

如果浏览器无法从网址加载自定义光标，您还应该添加一个后备光标;

cursor:url("images/globaleImg.png") -88 -415, auto;

已修复：http://jsfiddle.net/e8qVS/8/

作为旁注，目前它认为页面的主体仅与href标签一样高。如果要更改页面整个主体的光标，则需要添加以下内容以确保正文为页面高度的100％;

html, body {
    height: 100%;
}

http://jsfiddle.net/e8qVS/3/

Answer 3

问题＃1

光标热点的坐标，将被夹到光标图像的边界。如果未指定，则为坐标从文件本身读取热点（对于CUR和XBM文件）或者设置在图像的左上角。

CSS3语法的一个例子是：

.foo  {
    cursor:  auto;
    //no pixel value, or negative
    cursor:  url(cursor1.png) 4 12, auto;
}

问题＃2

来自Mozilla MDN

在Gecko（Firefox）中，光标大小的限制为128×128px。较大的   光标图像被忽略。但是，你应该限制自己   尺寸为32×32，以便与操作系统和   平台。

（由于Gecko 1.9.2-1.9.2.6中的错误，Windows上的Firefox 3.6-3.6.6   限制为32x32px。这在以后的版本中已得到修复。）

小提琴：

检查这个小提琴，你会看到它正常工作，你只需要一个较小的图像：

http://jsfiddle.net/F4uU5/1/

根据背景位置更改光标网址

3 个答案:

问题＃1

问题＃2

小提琴：