我的代码是这样的:
<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;
}
当我点击链接时,光标不会更改它的默认图像,我做错了什么?
最佳答案
问题#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 ,你会发现它正在工作,你只需要一个较小的图像:
关于javascript - 根据背景位置更改光标 url,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19950839/