Home/ Questions/Q 8421563
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T03:11:01+00:00

I have 2 div’s. One big yellow box and one small red box. I

  • 0

I have 2 div’s. One big yellow box and one small red box. I use jQuery to append the mousemove effect on the yellow box. When the mouse is over the yellow box, the mouseover causes the red box to follow the mouse. When then mouse reaches the red box “in” the yellow box, is no longer on mousemove on the yellow box and the red box stops follow the mouse. When the mouse enter the yellow box again it move with the mouse again – of course. The red box have to follow the mouse as long it is over the yellow box and not stop because it move over the red box itself. Is there a way to prevent that?

Thanks

Code here: http://jsfiddle.net/Illum/pPn3v/

<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<style type="text/css">
#box1 {width: 500px; height: 500px; background-color: Yellow; border: 2px solid Blue;}
#box2 {width: 100px; height: 100px; background-color: red; border: 2px solid pink; z-index: 100; position: absolute;}    
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>

<script type="text/javascript">
    $("#box1").bind('mousemove', function (e) {
        $("#box2").css("left", e.pageX);
        $("#box2").css("top", e.pageY);
    });
</script>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve written a solution to your problem here (jsfiddle). It may not be the cleanest solution, but it’s the only way I can think of accomplishing the task without embedding the div’s inside one another.

    I have basically added another listener to the “red” box that checks if it is still within the yellow box.

    var yellow = $('#yellow');
var offset = yellow.offset();
var offsetWidth = offset.left + yellow.width();
var offsetHeight = offset.top + yellow.height();

var red = $('#red');

yellow.on('mousemove', function (e) {
    red.css("left", e.pageX);
    red.css("top", e.pageY);
});

red.on('mousemove', function (e) {
    if(e.pageX >= offset.left && e.pageY >= offset.top &&
       e.pageX <= offsetWidth && e.pageY <= offsetHeight) {
        red.css("left", e.pageX);
        red.css("top", e.pageY);  
    }               
});
    • 0