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

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

【问题讨论】:

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

标签: javascript cursor


【解决方案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

    【讨论】: