2

我的代码是这样的：

 <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;
}

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

4

3 回答 3

0

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

改变;

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

至;

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

仅供参考，XY坐标是改变光标的热点，而不是图像的实际位置。

您还应该添加一个后备光标，以防浏览器无法从 URL 加载自定义光标；

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

固定：http: //jsfiddle.net/e8qVS/8/

附带说明一下，目前它认为页面的正文仅与 href 标记一样高。如果要更改整个页面的光标，则需要添加以下内容以确保正文为页面高度的 100%；

html, body {
    height: 100%;
}

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

于 2013-11-13T10:27:08.037 回答
0

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

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

见stackoverflow问题

JSFiddle

于 2013-11-13T10:23:45.370 回答
0

问题 #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/

于 2013-11-13T10:49:40.227 回答