使用 javascript 自定义大鼠标光标答案

【问题标题】：Custom large mouse cursor with javascript使用 javascript 自定义大鼠标光标
【发布时间】：2014-05-21 13:37:54
【问题描述】：

我想创建自定义光标图像，但仅限于 32x32，而我需要大约 300x300 的图像。所以看来我需要隐藏光标cursor: none 并创建自定义大 div 或图像，这将使用隐形鼠标移动。

最简单的实现可能是：

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

但我有一些问题：

性能（我应该如何实现不使用左上属性的移动 div）
文本选择jsfiddle无法正确选择文本

谁能帮我解决这个问题？

【问题讨论】：

我对你的 #1 很好奇——你有一些性能问题吗？这会让我感到惊讶。
@T.J.Crowder 可能我想使用 css 转换而不是更改左上角...或一些 javascript 实现，例如 VelocityJS 或 GSAP

标签： javascript jquery css mouse-cursor

【解决方案1】：

在modern browsers上，你需要使用pointer-event CSS属性设置为none：

--DEMO--

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

【讨论】：

我们说的是真的现代，甚至 IE9 或 IE10 都不支持这一点，您需要 IE11（在 IE 行中）来获取指针事件。
@TJCrowder 感谢反馈，我不确定哪个 IE 版本支持它，正在考虑 IE9
谢谢！这就是我一直在寻找的。我的选择问题是因为光标选择了图像/div吗？

【解决方案2】：

如果 Cursor 和 Text 的颜色相同，则将 z-index: -1 添加到光标。所以光标在文本后面，让您选择它。

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

【讨论】：

有趣的技巧，但是文本选择颜色覆盖了图像。