游标的错觉

Question

是否可以使图像出现在光标位置（例如，光标图像），然后隐藏原始图像（ cursor:none; ），然后使图像移动！ 给人一种幻象，即指示器自身在移动，然后使光标出现在光标图像所在的位置。 然后使图像消失。 我不确定要显示光标

我读到，出于安全原因，无法使用Javascript移动光标，因此我考虑仅出于其目的创建一种幻觉就可以了。 是或否就足够了！ （这样我就可以向前走了）关于使图像显示在光标位置上并没有太多发现！ ：P

Answer 1

An yes or no will suffice!

是

好吧，让我们更深入地回答...

我们在div（ #bar ）中放置“自定义”指针，并在其中隐藏实际指针：

<div id="bar">
    <div id="pointer"></div>
</div>

将cursor设置为none可以隐藏实际的指针，在#pointer设置一个图像以替代它：

body {
    padding:50px;
}
#bar {
    background-color: green;
    width: 400px;
    height: 400px;
    cursor: none;
}
#pointer {
    position: absolute;
    width:32px;
    height:32px;
    background-image:url('//i.imgur.com/uKc3VMy.png');
}

添加一些JavaScript（我采用了jQuery路线，但是使用香草JS也完全可以实现）来移动图像作为指针：

$("#bar").mousemove(function (e) {
    $('#pointer').offset({
        left: e.pageX,
        top: e.pageY
    })
});

样本： http ： //jsfiddle.net/e9BXg/1/