游標的錯覺

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/