我尝试将div元素的中心定位到鼠标光标的中心，这将跟随它的移动。
我已经编写了下面的代码，但这个代码的问题是，下面的div没有位于光标的中心，而是与光标有一些偏移。

• • 工作流程**

我的代码背后的基本思想是，当鼠标进入.post-entry div元素时，当前项中的.pointer应该显示并跟随鼠标光标，当鼠标离开div时，它应该隐藏。

• • 代码**

HTML发布项目：

<article class="col-md-4 col-sm-6 post-entry">
    <a href="#" title="">
        <figure class="post-thumb">
            <img src="http://placehold.it/300x300" alt="">
            <div class="pointer" style="background: red;"></div>
        </figure><!-- End figure.post-thumb -->
    </a>
</article><!-- End article.col-md-4 post-entry -->

联森：

$('.entry .post-entry').each(function() {
  $(this).on("mouseenter", mouseEnter);
  $(this).on("mousemove", mouseMove);
  $(this).on("mouseleave", mouseLeave);
});

function mouseEnter(event) {

  console.log('enter');

  var target = $(this);
  var dot = target.find('.pointer');

  var mX = (event.clientX);
  var mY = (event.clientY);

  set(
    dot, {
      x: mX,
      y: mY,
      force3D: !0
    }
  );

};

function mouseMove(event) {

  console.log('move');

  var target = $(this);
  var dot = target.find('.pointer');

  // var offset = target.offset();
  // var width = target.width();
  // var height = target.height();
  // var top = offset.top;
  // var left = offset.left;

  var mX = (event.clientX);
  var mY = (event.clientY);

  $(dot).css('-webkit-transform', 'translate3d(' + mX + 'px, ' + mY + 'px, 0)');

};

function mouseLeave(event) {

  console.log('leave');

    var target = $(this);
    var dot = target.find('.pointer');

    $(dot).css('-webkit-transform', 'translate3d(0, 0, 0) scale(0, 0)');

};

function onClick(event) {
  event.preventDefault();
  console.log('click');
};

function set(el, obj) {
  var dot = $(el).css('-webkit-transform', 'translate3d(' + obj.x + 'px, ' + obj.y + 'px, 0px)');
  return dot;
};

• • 问题/演示**

如前所述，范围跟随鼠标光标，只是范围没有定位到光标的中心。它将偏移鼠标。See live demo here
对于mX和mY变量，我已经尝试过类似的方法，但是没有成功：

var mX = (event.clientX - $(this).offset().left) / $(this).width() * $(this).width() - .125 * $(this).width();
var mY = (event.clientY - $(this).offsetTop) / $(this).height() * $(this).height() - .125 * $(this).width();

另外，从@hiEven的答案不工作，将让我与同样的问题：

transform: calc(mX - 50%, mY - 50%)

我知道我应该做一些事情，把. pointer除以一半，但是我应该如何在代码中实现它对我来说是一个很大的问号。

更新

我创建了两个新的Codepen项目：
不带图像使用：http://codepen.io/anon/pen/GqGOLv。当你悬停在第一个项目上时，你会看到棕色的指针正确地跟随着你的鼠标光标--这就是我要找的。但是当你悬停在第二个项目上时，你会看到红色的指针，只有当你在项目的最左边时。
当我使用图像时：http://codepen.io/anon/pen/QExOkx。这个例子的问题是当你在第一列的最顶端时，你会看到棕色的指针。当你悬停在第二项的左上角时，你会看到一小块红色的指针，与没有图片的例子相同。
两个指针都应该正确地跟随鼠标光标。而且我正在寻找一个使用图像的解决方案。
除了这两个例子，当我在第一个例子中添加一个额外的margin-left到第一个项目时，棕色指针不会在鼠标光标的中心，只有当它被设置为左边距为零时才会出现。
所以我不知道缺少了什么，为什么它只适用于第一个例子（没有图像），而且只适用于第一个项目？