用 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()并在路上。