83

How can I use jQuery to follow the cursor with a DIV?

General Grievance
  • 4,555
  • 31
  • 31
  • 45
Peter
  • 11,413
  • 31
  • 100
  • 152

3 Answers3

143

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.

Zenexer
  • 18,788
  • 9
  • 71
  • 77
jAndy
  • 231,737
  • 57
  • 305
  • 359
  • 11
    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});` – Brad Feb 13 '12 at 18:10
  • 1
    Nice demo @Reigel ! I modified it a bit to show a horizontal line (http://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. – Tim Swast Jun 15 '12 at 15:36
  • 2
    @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? – MonteCristo Dec 04 '12 at 15:18
  • 1
    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: https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ – DavidsKanal Aug 09 '19 at 17:25
21

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.

hairy yuppie
  • 321
  • 2
  • 7
18

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

CoursesWeb
  • 4,179
  • 3
  • 21
  • 27
Uller
  • 189
  • 1
  • 2