Testing stuff

http://stackoverflow.com/questions/4666367/how-do-i-position-a-div-relative-to-the-mouse-pointer-using-jquery

by MegaScience

HTML

<div class="classForHoverEffect">
  <div id="DivToShow">

  </div>
</div>

CSS

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#lastClick {
  height: 15px;
  width: 15px;
  background-color: red;
}

JavaScript

var mouseX, mouseY;

var it = $('<div></div>').attr('id', 'lastClick').css({
  'top': 0,
  'left': 0
});
$(document).append(it);
$(document).mousemove(function(e) {
  mouseX = e.pageX;
  mouseY = e.pageY;
});
$(document).mouseover(function() {
  $('#lastClick').css({
    'top': mouseY,
    'left': mouseX
  });
});
$(document).mouseup(function() {
  $('#lastClick').removeAttr('id');
  var it = $('<div></div>').attr('id', 'lastClick').css({
    'top': mouseY,
    'left': mouseX
  });
  $(document).append(it);
});