jQuery - Follow the cursor with a DIV

html jquery mouse-cursor

119,643

Solution 1

You can't follow the cursor with a DIV, but you can draw a DIV when moving the cursor!

$(document).on('mousemove', function(e){
    $('#your_div_id').css({
       left:  e.pageX,
       top:   e.pageY
    });
});

That div must be off the float, so position: absolute should be set.

Solution 2

You don't need jQuery for this. Here's a simple working example:

<!DOCTYPE html>
<html>
    <head>
        <title>box-shadow-experiment</title>
        <style type="text/css">
            #box-shadow-div{
                position: fixed;
                width: 1px;
                height: 1px;
                border-radius: 100%;
                background-color:black;
                box-shadow: 0 0 10px 10px black;
                top: 49%;
                left: 48.85%;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var bsDiv = document.getElementById("box-shadow-div");
                var x, y;
    // On mousemove use event.clientX and event.clientY to set the location of the div to the location of the cursor:
                window.addEventListener('mousemove', function(event){
                    x = event.clientX;
                    y = event.clientY;                    
                    if ( typeof x !== 'undefined' ){
                        bsDiv.style.left = x + "px";
                        bsDiv.style.top = y + "px";
                    }
                }, false);
            }
        </script>
    </head>
    <body>
        <div id="box-shadow-div"></div>
    </body>
</html>

I chose position: fixed; so scrolling wouldn't be an issue.

Solution 3

This works for me. Has a nice delayed action going on.

var $mouseX = 0, $mouseY = 0;
var $xp = 0, $yp =0;

$(document).mousemove(function(e){
    $mouseX = e.pageX;
    $mouseY = e.pageY;    
});

var $loop = setInterval(function(){
// change 12 to alter damping higher is slower
$xp += (($mouseX - $xp)/12);
$yp += (($mouseY - $yp)/12);
$("#moving_div").css({left:$xp +'px', top:$yp +'px'});  
}, 30);

Nice and simples

119,643

Peter

Updated on December 23, 2021

Comments

Peter over 2 years

How can I use jQuery to follow the cursor with a DIV?
Brad over 12 years

I had some trouble with getting this working correctly. Using a pure jQuery solution rather than .css() ended up working for me. Inside the function, use this line instead: $('#your_div_id').offset({left: e.page, top: e.pageY});
scubadivingfool almost 12 years

Nice demo @Reigel ! I modified it a bit to show a horizontal line (jsfiddle.net/rg8S8). I'm planning to use this to help people read plots (they are png images, so not much I can do to show values as text, automatically). It should work a lot better than "eyeballing" values.
MonteCristo over 11 years

@jAndy is it possible to do this when the div is in a parent div? so when user move mouse with the parent/container div... the child div move within the container?
Jonah about 10 years

His answer is providing something new, a damping effect
DavidsKanal almost 5 years

This solution is horrible! First of all, it uses jQuery, but second of all, setting top and left are very inefficient, as they cause repaints. Google and others all recommend using transform: translate, as the that won't cause repaints and draw from the existing GPU buffer. I know this answer is 9 years old, but at least EDIT it. More on this here: html5rocks.com/en/tutorials/speed/high-performance-animation‌s