javascript - 使用自定义光标调整鼠标位置

Question

我目前正在尝试在悬停时使用大型自定义光标，我想让悬停更准确一些。我想让光标在图像中居中，而不是在左上角。 我不确定哪种方法最好，有什么建议吗？

这是一个简单的例子:https://codepen.io/kombolo/pen/MWYpaXj

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

.el {
  margin-top:100px;
  width: 100vw;
  height:100px;
  font-size:128px;
  text-align:center;
  cursor: url("http://www.tsi.enst.fr/pages/enseignement/ressources/mti/quat_TF/pages-site/images/applic40.jpg"), auto;
}

谢谢

Answer 1

您可以以像素为单位更改光标的“热点”位置(不确定是否可以以 % 为单位)

cursor: url(your image) posX posY, auto;

.el {
  margin-top:100px;
  width: 100vw;
  height:100px;
  font-size:128px;
  text-align:center;
  cursor: url("http://www.tsi.enst.fr/pages/enseignement/ressources/mti/quat_TF/pages-site/images/applic40.jpg") 75 75, auto;
}

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