用 HTML 元素替换光标答案

【问题标题】：Replace cursor with an HTML element用 HTML 元素替换光标
【发布时间】：2025-12-23 16:40:15
【问题描述】：

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

【问题讨论】：

例如，是否可以将光标替换为动画画布元素（或表格）而不是图像？
表？这将是一个巨大的光标！
@dfsq 这将取决于表的内容。如果表格只包含一些非常小的图像，它根本不会很大。
这听起来很有趣，所以我要试一试。将元素强制到某个位置可能非常复杂，但我当然认为这是可能的。
@howderek 我期待看到您对这个问题的解决方案。 :)

【解决方案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() 并继续前进。

【讨论】：

我注意到，只要按住并拖动鼠标，光标仍然会出现（在最新版本的 Google Chrome 中，在 Windows 7 上）。我想知道是否有可能解决这个问题。
@AndersonGreen 不幸的是，这样做的唯一方法似乎是通过在onmousedown 事件上使用return false 来阻止文本选择。这是一个示例小提琴：jsfiddle.net/howderek/mCgmP/9
是否可以允许自定义光标选择文本？我注意到使用自定义光标突出显示文本没有按预期工作。似乎是自定义光标overlaps slightly with the text that I'm trying to select，因此可能需要将光标从鼠标位置稍微偏移。
@AndersonGreen 我阻止了光标内文本的选择并添加了一个偏移量：jsfiddle.net/howderek/mCgmP
将图像用作光标时，高亮仍然无法正常工作。也许偏移量应该根据光标的高度自动调整，而不是设置为 20 像素。 jsfiddle.net/mCgmP/14

【解决方案2】：

如果替换是指用 HTML 元素更改光标的图像，那么不是 -- here's how the cursor CSS property works.

你可以做的是隐藏光标，并在光标周围有一个绝对位置元素。

<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("body").mousemove(function(event){
                $("#cursor").css("left", event.pageX)
                $("#cursor").css("top", event.pageY)
            })
        })
    </script>
    </head>
    <body style="cursor:none">
    <div id="cursor" style="position:absolute">hello</div>
    </body>
</html>

【讨论】：

【解决方案3】：

编辑我忘了：

cursor: none;

HTML

<div id="mydiv">
    <canvas id="mycanvas" width="50" height="50"></canvas>
</div>

CSS

#mydiv
{
    position: fixed;
    top: 0px;
    left: 0px;
    width:1000px;
    height: 1000px;
    background-color: red;
}

#mycanvas
{
    position: relative;
    top: 0px;
    left: 0px;
    background-color: black;
}

JAVASCRIPT

function Thing(x, y)
{
    this.x = x;
    this.y = y;
}

var mousePos = new Thing(0, 0);

mydiv = document.getElementById("mydiv");
mycanvas = document.getElementById("mycanvas");

mydiv.addEventListener('mousemove', function(event)
{
    mousePos.x = event.clientX;
    mousePos.y = event.clientY;

    mycanvas.style.top = mousePos.y + "px";
    mycanvas.style.left = mousePos.x + "px";
    console.log(mycanvas.style);
}, false);

You can play with it here

【讨论】：

将 position: absolute; 更改为 position: fixed 以便滚动：jsfiddle.net/howderek/n4V23/2
@howderek 我认为应该编辑此答案以反映您所做的更正。 :)
这也适用于其他类型的 HTML 元素。 jsfiddle.net/n4V23/3