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()并继续前进。

Answer 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>

Answer 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

用HTML元素替换游标

3 个答案:

代码（Javascript）