In this page it is a JavaScript object that can be used to make a HTML Div to follow the mouse cursor, inside a parent element (See the comments in code).
- Here is the complete code: HTML, CSS, JavaScript (click on the code to select it).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Div following mouse cursor inside a parent</title>
<style>
#parent_div {
  position: relative;
  width: 80%;
  height: 300px;
  margin: 1em auto;
  border; 1px solid #333;
  background: #fefebe;
}
#div_moving {
  position: absolute;
  width: 140px;
  height: 65px
  margin: 0;
  border: 1px solid #33f;
  background: #88ee99;
}
</style>
</head>
<body>

<div id="parent_div">
  <div id="div_moving">Moving Div ..</div>
  Content in parent ...
</div>

<script>
// Here get the Div that you want to follow the mouse
var div_moving = document.getElementById('div_moving');

// Here add the ID of the parent element
var parent_div = 'parent_div';

// object to make a HTML element to follow mouse cursor ( https://coursesweb.net/ )
var movingDiv = {
  mouseXY: {},  // will contain the X, Y mouse coords inside its parent

  // Get X and Y position of the elm (from: vishalsays.wordpress.com/ )
  getXYpos: function(elm) {
    x = elm.offsetLeft;        // set x to elm’s offsetLeft
    y = elm.offsetTop;         // set y to elm’s offsetTop

    elm = elm.offsetParent;    // set elm to its offsetParent

    //use while loop to check if elm is null
    // if not then add current elm’s offsetLeft to x, offsetTop to y and set elm to its offsetParent
    while(elm != null) {
      x = parseInt(x) + parseInt(elm.offsetLeft);
      y = parseInt(y) + parseInt(elm.offsetTop);
      elm = elm.offsetParent;
    }

    // returns an object with "xp" (Left), "=yp" (Top) position
    return {'xp':x, 'yp':y};
  },

  // Returns object with X, Y coords inside its parent
  getCoords: function(e) {
    var xy_pos = this.getXYpos(e.target);

    // if IE
    if(navigator.appVersion.indexOf("MSIE") != -1) {
      var standardBody = (document.compatMode == 'CSS1Compat') ? document.documentElement : document.body;

      x = event.clientX + standardBody.scrollLeft;
      y = event.clientY + standardBody.scrollTop;
    }
    else {
      x = e.pageX;
      y = e.pageY;
    }

    x = x - xy_pos['xp'];
    y = y - xy_pos['yp'];

    return {'xp':x, 'yp':y};
  }
};


// registers 'mousemove' event to parent_div
document.getElementById(parent_div).addEventListener('mousemove', function(e){
  mouseXY = movingDiv.getCoords(e);
  div_moving.style.left = mouseXY.xp + 8 +'px';
  div_moving.style.top = mouseXY.yp - 8 +'px';
});
</script>

</body>
</html>

• Demo (move the mouse over this rectangle):
Moving Div ..
Content in parent ...

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
Follow the mouse cursor with a DIV inside a Parent

Last accessed pages

  1. Contact page - CoursesWeb (14281)
  2. Tabs effect with CSS (14974)
  3. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (21023)
  4. Insert, Select and Update NULL value in MySQL (39944)
  5. Get and change IFrame content through a JavaScript script created in another IFrame (9261)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2349)
  2. Contact page - CoursesWeb (2257)
  3. Tabs effect with CSS (2255)
  4. Insert, Select and Update NULL value in MySQL (1001)
  5. PHP getElementById and getElementsByTagName (904)