javascript - 用 HTML 元素替换光标

Question

使用 JavaScript，是否可以将光标替换为 HTML 元素(例如 div 或 Canvas )而不是自定义图像？在某些情况下，用图像以外的 HTML 元素替换光标会很有用，但我目前不知道有什么方法可以做到这一点。

Answer 1

这是 jQuery 中的一个解决方案，您可以将其视为优势或劣势。我使用 jQuery 的原因是它的跨浏览器鼠标位置支持和强大且简单的 .css 功能。

代码(Javascript)

var ElementCursor = {
    cursorElement: "",
    setCursor: function (cursorId) {
        $('html').css({
            'cursor': 'none',
        });
        ElementCursor.cursorElement = cursorId;
        ElementCursor.updateCursor();
    },
    removeCursor: function () {
        $('html').css({
            'cursor': ''
        });
        ElementCursor.cursorElement = '';
    },
    updateCursor: function () {
        $(document).mousemove(function (e) {
            $('#' + ElementCursor.cursorElement).css({
                'position': 'fixed',
                'user-select': 'none',
                'top': e.pageY + 2 + 'px',
                'left': e.pageX + 2 + 'px'
            });
        });
    }
};

ElementCursor.setCursor("cursor");

将其添加到 Javascript 后，您只需调用 ElementCursor.setCursor(id_of_your_cursor_element_here) 即可自动用该元素替换光标。不再想要那个光标了？调用 ElementCursor.removeCursor() 并继续前进。