移动光标的错觉

Question

是否可以使图像出现在光标位置（例如，光标图像），然后隐藏原始图像（cursor:none;），然后移动图像！给出指针自身移动的错觉，然后使光标出现在光标图像所在的位置。然后让图像消失。我不确定是否会出现光标

我读到由于安全原因，不可能使用Javascript移动光标，所以我想的只是创建它的错觉，这对我的目的来说很好。是或否就足够了！ （所以我可以去foward）没有找到太多关于使图像出现在光标位置！ ：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路由，但很可能使用vanilla JS）将图像作为指针移动：

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

示例：http://jsfiddle.net/e9BXg/1/