Apply hover from the cursor position

Question

I need get hover effect in a div from the cursor position.

I have this html and css

Answer 1

var ol_x= null;
var ol_y= null;
function moveInner(me, e)
{
if(ol_x!=null)
{
var ctx = me.getContext("2d");
 ctx.arc(ol_x, ol_y, 42, 0, 2 * Math.PI, false);
 ctx.fillStyle='grey';
    ctx.fill();
    ctx.restore();
}
ol_x = e.clientX+20;
ol_y = e.clientY+20;
  var ctx = me.getContext("2d");
ctx.beginPath();
ctx.arc(ol_x, ol_y, 40, 0, 2*Math.PI, false);
ctx.fillStyle ='black';
ctx.fill();
ctx.stroke();

}

.f {
  width: 200px;
  height: 200px;
  background-color: grey;
  position: fixed;
  border-radius: 100px;
}

Hi this is my solution for EDIT

I use 2D context to draw inner DIV inside parent DIV