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

Question

I'm currently experimenting with large custom cursor on hover and I'd like to make the hover a little more accurate. I'd like to center the cursor in the image not to be top left. I'm not sure exactly which method would the be the best, any tips on that ?

Here's a quick example: 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;
}

Thanks

Answer 1

You can change the cursor's 'hotspot' position in pixels ( not really sure you can in % )

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>