如何让鼠标光标始终位于跟随移动的圆形元素中心？

算力阿峰

2026-6-16

解决圆形跟随鼠标时光标位于圆心的问题

你当前的代码是把圆形的左上角定位在鼠标位置，所以光标会落在圆形边缘。要让光标保持在圆形中心，只需要在计算top和left时，减去圆形自身宽高的一半即可。

修改后的JavaScript代码

$("#box").mousemove(function(e) {
  const $circle = $(this).find(".circle").first();
  const containerOffset = $(this).offset();
  const circleWidth = $circle.width();
  const circleHeight = $circle.height();
  
  // 计算圆心相对于容器的位置：鼠标位置 - 容器偏移 - 圆形半宽/半高
  const x = e.pageX - containerOffset.left - circleWidth / 2;
  const y = e.pageY - containerOffset.top - circleHeight / 2;
  
  $circle.css({ top: y, left: x });
});

完整代码示例

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<div id="box">
    <div class="circle"></div>
</div>

CSS

#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; }