javascript - 如何将图像用作网站上的光标？

Question

<分区>

Answer 1

好的!所以我们只能 sorta 不使用 CSS 来做到这一点。

我们可以用 jQuery 做的只是将图像移动到光标的正下方。这适用于:

$(document).mousemove(function() {
    var mouseY = event.pageY;
    var mouseX = event.pageX;

    if(mouseY && mouseX) {
        console.log(mouseX, mouseY);

        $(".under-cursor").offset({
            top: mouseY,
            left: mouseX
        });
    }
});

问题是光标仍然可见。此 CSS 会在此处隐藏光标:

html {
    cursor: none;
}

这是一个使用 JavaScript 和 CSS 的有效 JSFiddle:http://jsfiddle.net/br1ckb0t/gsycumyy/

但是 CSS 有两个缺点:

1. 它使用 CSS。
2. 然后鼠标就不能用了。

所以你可能想要:

1. 使用 CSS。

或:

1. 使用我编写的 JavaScript 并允许鼠标​​光标停留。

这有道理吗？希望你能弄明白!