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 is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Follow the mouse cursor with a DIV inside a Parent

Last accessed pages

  1. Register and show online users and visitors (22779)
  2. innerHTML and outerHTML to Get and Replace HTML content (17554)
  3. Node.js Move and Copy file (3517)
  4. Add, Change, and Remove Attributes with jQuery (36000)
  5. Python Programming (699)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (447)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (352)
  3. Register and show online users and visitors (321)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (302)
  5. Insert, Select and Update NULL value in MySQL (214)