Question

我想创建自定义光标图像，但它限制为32x32，而我需要大约300x300图像。因此，似乎我需要隐藏光标cursor: none并创建自定义大型div或图像，这将使用不可见鼠标移动。

最简单的实现可能是：

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

但我有一些问题：

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

任何人都可以帮我吗？或者也许有人知道js-library。

Answer 1

在modern browsers上，您需要将pointer-event CSS属性设置为none：

--DEMO--

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

Answer 2

如果光标和文本在同一颜色中，则将z-index：-1添加到光标。所以光标在文本后面，让你选择它。

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

使用javascript自定义大鼠标光标

2 个答案:

--DEMO--