javascript - 想要为更大尺寸的光标使用自定义图像。解决方法是什么？可以用javascript来做吗？

Question

$('#dustingBrush').unbind('click').bind('click' , function () {
    $(".section, window.parent.document").css({"cursor": "url("+localImagePath + data.brushPointer1+"),pointer"});
    $(this).css("display" , "none");
});

光标图像来自 json，但当我使用较大尺寸的图像时它没有反射(reflect)，但它在较小的图像上工作正常。

请建议我解决此问题的方法。

谢谢......

Answer 1

请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/cursor/url 中的限制部分Firefox 允许您使用 128×128px 的图像。较大的图像将被忽略。根据本文，您应该将大小限制为 32×32，以获得与操作系统和平台的最大兼容性

解决方法是隐藏光标并使用包含较大图像的尾随 div。

这将模拟更大光标的行为。

下面给出了示例 CSS、html 和 jquery。

CSS:

#replacePointer {
    position: absolute;
    cursor:none;
}

HTML:

<div id="replacePointer"><img src="http://www.w3schools.com/images/w3logotest2.png" /></div>

Jquery:

$(document).bind('mousemove', function(e){
$('#replacePointer').css({
    left:  e.pageX -10,
    top:   e.pageY -10
});
});