使用JavaScript自定义大型鼠标光标

Question

我希望创建自定义鼠标图像，但限制在32x32，而我需要约300x300的图像。因此，似乎需要隐藏鼠标cursor: none并创建自定义大型div或图像，这将随着不可见鼠标移动。

最简单的实现方式可能是：

$(document).on('mousemove', function(e){
     $('#custom-cursor').css({
          left:  e.pageX,
          top:   e.pageY
     });
});

但我有一些问题：

1. 性能（如何实现移动 div 而不是使用 left-top 属性）
2. 文本选择在 jsfiddle 上无法正确选择文本

有人可以帮我吗？

- vedmaque

---

我对你的#1很好奇——你有性能问题吗？那会让我感到惊讶。 - T.J. Crowder

@T.J.Crowder，我可能想要使用CSS变换而不是改变左上角...或者一些JavaScript实现，例如[VelocityJS]（http://velosityjs.org）或[GSAP]（http://www.greensock.com/gsap-js/）。 - vedmaque

Answer 1

在现代浏览器中，您需要使用CSS属性pointer-event并将其设置为none：

--演示--

$(document).on('mousemove', function (e) {
    $('#custom-cursor').css({
        left: e.pageX,
        top: e.pageY,
        pointerEvents: 'none'
    });
});

- A. Wolff

---

我们在谈论非常现代化的内容，甚至IE9或IE10都不支持这一点，你需要使用IE11（在IE系列中）才能获得指针事件。 - T.J. Crowder

@T.J.Crowder 感谢您的反馈，我不确定哪个IE版本支持它，一直认为IE9以下不支持，该死的IE... 不过，我不确定我们能否称IE11为现代浏览器。 - A. Wolff

谢谢！这就是我想要的。我的选择问题是因为光标选择了图像/分隔线吗？ - vedmaque

Answer 2

如果光标和文本颜色相同，则将z-index：-1添加到光标中。这样，光标就在文本后面，可以让您选择它。

但是，如果颜色不相等，则用户将看到光标在文本后面。

- Donngal

---

有趣的技巧，但是文本选择颜色会覆盖在图像上。 - vedmaque