CODEWITHSUNDEEP
javascriptcssdomcursordhtml
brentonstrine
brentonstrine

Reputation: 22742

Cursor style doesn't update when element dynamically moved under it

When an element is dynamically moved under the location of the cursor, the cursor style doesn't update until the user moves the cursor at least 1px. For example, say I have some Javascript that moves this div directly under the cursor on mouse click.

<div style="cursor:move">hover me!</div>

If you hover over the div, the cursor will change to move. However, if you click and the div gets moved under your cursor, the cursor remains the default arrow until you move the cursor at least 1px.

Here's a JSFiddle demo.

Is there a way to directly change the cursor via Javascript or force the cursor to update properly?

Upvotes: 3

Views: 2813

Answers (1)

mknadler
mknadler

Reputation: 208

Temporarily manually setting the cursor to move seems to work. As soon as the mouse is moved again, the JS-applied CSS is cleared + normal behavior takes over.

http://jsfiddle.net/x0nbvt25/2/

$(document).ready(function(){
    $("body").on("click", function(c){
        $(".drag").offset({
            top: c.pageY-8,
            left: c.pageX-25
        });
        $("body").css("cursor", "move");
        $("body").mousemove(function(){
            $("body").css("cursor", '');
        });
    });
});

Upvotes: 2

Related Questions