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

$('.f').on('mousemove', function(e){
var par = $(this);
  if((e.pageX <= par.width() && e.pageX >= 0) && e.pageY <= par.height() && e.pageY >= 0){
    $('.s').css({
       position: 'relative',
       left:  e.pageX - (par.width() / 2),
       top:   e.pageY - (par.height() / 2)
    });
    } else {
    $('.s').css({
      position: 'initial'
    });
    }
});

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

.s {
  width: 50px;
  height: 50px;
  background-color: black;
  border-radius: 100px;
  margin: 75px 0px 0px 75px;
  transition: width 1s, height 1s, margin 1s;
}

.s:hover {
  width: 100px;
  height: 100px;
  background-color: black;
  margin: 50px 0px 0px 50px;
}