javascript - 根据背景位置更改光标 url

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

问题#1

The coordinates of the cursor's hotspot, which will be clamped to the boundaries of the cursor image. If none are specified, the coordinates of the hotspot are read from the file itself (for CUR and XBM files) or are set to the top left corner of the image.

CSS3 语法的一个例子是:

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

问题#2

来自 Mozilla MDN

In Gecko (Firefox) the limit of the cursor size is 128×128px. Larger cursor images are ignored. However, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms.

(Due to a bug in Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 on Windows limits to 32x32px. This is fixed in later versions.)

fiddle :

检查这个 fiddle ，你会发现它正在工作，你只需要一个较小的图像:

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