3

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

4

3 回答 3

5

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

于 2013-03-09T19:51:23.127 回答
1

如果通过替换您的意思是用 HTML 元素更改光标的图像，那么不 -这是光标 CSS 属性的工作方式。

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

<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>
于 2013-03-09T18:31:56.540 回答
1

编辑 我忘记了：

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);

你可以在这里玩

于 2013-03-09T18:33:26.190 回答