Применить курсор из позиции курсора

Ответ 1

Чтобы изменить положение внутреннего круга, вы можете использовать pageX и pageY на mousemove. Чтобы изменить размер внутреннего круга, вы можете создать один класс, который будет scale div, и переключить этот класс на наведение над .f.

var s = $('.s')
var f = $('.f')
var oTop = f.offset().top + (s.height() / 2);
var oLeft = f.offset().left + (s.width() / 2);

f.hover(function() {
  s.toggleClass('change')
})

f.mousemove(function(e) {
  var x = e.pageY - oTop
  var y = e.pageX - oLeft

  s.css({
    top: x + 'px',
    left: y + 'px'
  })
})

.f {
  width: 200px;
  height: 200px;
  background-color: grey;
  position: fixed;
  overflow: hidden;
  border-radius: 100px;
}
.s {
  width: 50px;
  height: 50px;
  background-color: black;
  border-radius: 100px;
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.5s linear, opacity 0.3s linear;
}
.change {
  transform: scale(2);
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
  <div class="s"></div>
</div>

Ответ 2

Вот решение jQuery.

$("div.f").mousemove(function(e) {
  $('div.s').css({
    left: e.clientX - 28,
    top: e.clientY - 24
  });
});

.f {
  width: 200px;
  height: 200px;
  background-color: grey;
  position: fixed;
  border-radius: 100px;
  /* comment or remove the overflow if necessary */
  overflow: hidden;
}

.s {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: black;
  border-radius: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
  <div class="s"></div>
</div>

Ответ 3

$('.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
  <div class="s"></div>
</div>

Ответ 4

function moveInner(e)
{
  var inner = document.getElementById('inner');
 
  inner.style.top = (e.clientY-100)+"px";
  inner.style.left= (e.clientX-100)+"px";
}

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

.s {
  width: 100px;
  height: 100px;
  background-color: black;
  border-radius: 100px;
  margin: 75px 0px 0px 75px;

  position: absolute;
}


Please put the inner div outside the parent div
And set the onmouseover for parent div to change inner div position

<div class="f" id="parent" onmousemove="moveInner(event)">
  
</div><div class="s" id="inner"></div>

Ответ 5

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<BR>
I use 2D context to draw inner DIV inside parent DIV

<canvas class="f" id="parent" onmousemove="moveInner(this, event)">
  
</canvas>