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. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (76673)
  2. MSLA2 - Filter Content with Multiple Select Lists with Ajax (1628)
  3. Draw arrow markers with clicks in html element (1608)
  4. Ajax script to Save Canvas Image on Server (3565)
  5. jQuery plugin for Image SlideShow Carousel - Feature Carousel 2 (1756)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2456)
  2. Contact page - CoursesWeb (2373)
  3. Tabs effect with CSS (2363)
  4. Insert, Select and Update NULL value in MySQL (1351)
  5. PHP getElementById and getElementsByTagName (928)