javascript - Replace cursor with an HTML element

Using JavaScript, is it possible to replace the cursor with an HTML element (such as a div or canvas) instead of a custom image? It would be useful in some scenarios to replace the cursor with an HTML element other than an image, but I currently don't know of any way to do this.

Share Improve this question edited Apr 20, 2013 at 3:40 asked Mar 9, 2013 at 18:02 Anderson Green 31.9k70 gold badges211 silver badges339 bronze badges

For example, would it be possible to replace the cursor with an animated canvas element (or a table) instead of an image? – Anderson Green Commented Mar 9, 2013 at 18:03
2 Table? It would be huge cursor! – dfsq Commented Mar 9, 2013 at 18:03
@dfsq That would depend on the contents of the table. If the table only contained a few very small images, it wouldn't be huge at all. – Anderson Green Commented Mar 9, 2013 at 18:05
1 This sounds like a fun project so I'm going to give it a whirl. It might be pretty plex to force the element to a certain position, but I certainly think it is possible. – howderek Commented Mar 9, 2013 at 18:08
2 @howderek I'm looking forward to seeing your solution to this problem. :) – Anderson Green Commented Mar 9, 2013 at 18:13

| Show 2 more ments

3 Answers 3

Sorted by: Reset to default 5

Here is a solution in jQuery, which you could see as an advantage or disadvantage. The reason I used jQuery is its cross-browser mouse position support and powerful + easy .css function.

The Code (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");

After you add that to your Javascript, you can simply call ElementCursor.setCursor(id_of_your_cursor_element_here) and it will automagically replace the cursor with that element. Don't want that cursor anymore? Call ElementCursor.removeCursor() and be on your way.

If by replace you mean change the image of the cursor with an HTML element, then no -- here's how the cursor CSS property works.

What you could do is hide the cursor, and have an absolute position element that follows the cursor around.

<html>
    <head>
    <script src="http://ajax.googleapis./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>

EDIT I forgot:

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Replace cursor with an HTML element - Stack Overflow

3 Answers 3

The Code (Javascript)

与本文相关的文章

评论列表(0)