Держите курсор в центре изображения, пока изображение следует за ним. ⇐ CSS

[Anonymous]

У меня есть сцена (id="box"), при перемещении курсора по этой сцене вместе с курсором будет перемещаться красный кружок. Все работает так, как ожидалось, но курсор находится за пределами красного круга.
Я пытаюсь, чтобы курсор оставался в центре круга, но пока безуспешно.
Будем благодарны за любую помощь!

Код: Выделить всё

$("#box").mousemove( function(e) {
$popup = $(this).find(".circle").first();
var eTop = $(this).offset().top;
var eLeft = $(this).offset().left;
var x = e.pageX;
var y = e.pageY;
// console.log("pageX: " + x);
//  console.log("pageY: " + y)
$(this).find(".circle").css({top: y - eTop, left: x - eLeft });

});

Код: Выделить всё

#box {
width:500px;
height:200px;
display:block;
background: green;
position:relative;

}

.circle {
position: absolute;
z-index: 100;
overflow:hidden;
white-space: nowrap;
border: 1px solid red;
width: 100px;
height: 100px;
border-radius: 100%
}

#box .circle {visibility: hidden;}
#box:hover .circle {visibility: visible;}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/791 ... ge-follows