嘿，这个需求我之前也折腾过，其实要让自定义光标在悬停时居中（而不是默认的左上角对齐），最省心高效的方法就是用CSS原生的cursor属性偏移设置，下面给你详细讲讲：

最优方案：CSS原生偏移（固定尺寸光标） #

自定义光标默认是把图片的左上角和鼠标指针位置对齐的，我们只需要在cursor的url后面加上两个数值，分别表示光标图片相对于鼠标位置的水平偏移和垂直偏移。

比如你示例里的光标图片是applic40.jpg，从文件名能看出来是40x40px的尺寸，那我们把偏移量设为图片宽高的一半（20px），就能让图片中心和鼠标位置重合了。

修改后的代码如下：

HTML #

<div class="el"> Hello World </div>

CSS #

.el {
  margin-top:100px;
  width: 100vw;
  height:100px;
  font-size:128px;
  text-align:center;
  /* 关键：添加20 20的偏移量，对应40x40图片的中心位置 */
  cursor: url("http://www.tsi.enst.fr/pages/enseignement/ressources/mti/quat_TF/pages-site/images/applic40.jpg") 20 20, auto;
}

这个方法的优势太明显了：

• 纯CSS实现，不需要额外JS，性能拉满
• 兼容性好，现代浏览器（Chrome、Firefox、Edge等）都支持
• 代码简单，直接在原有样式上改就行

备选方案：JS动态计算（不确定光标尺寸时） #

如果你不确定自定义光标图片的尺寸，或者图片尺寸是动态变化的，那可以用JS先获取图片的实际宽高，再计算中心偏移量：

const targetEl = document.querySelector('.el');
const cursorImage = new Image();
cursorImage.src = "http://www.tsi.enst.fr/pages/enseignement/ressources/mti/quat_TF/pages-site/images/applic40.jpg";

// 图片加载完成后计算偏移量
cursorImage.onload = function() {
  const centerX = this.width / 2;
  const centerY = this.height / 2;
  targetEl.style.cursor = `url(${this.src}) ${centerX} ${centerY}, auto`;
};

总结 #

• 如果你的自定义光标是固定尺寸的，优先用CSS偏移方案，这是最优解
• 如果光标尺寸不确定，再用JS动态计算的方法兜底

内容的提问来源于stack exchange，提问作者Pickle_Rick