CODEWITHSUNDEEP
javascriptcsshovercursormouse
Pickle_Rick
Pickle_Rick

Reputation: 121

Adjusting mouse position with custom cursor

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

Upvotes: 0

Views: 1145

Answers (1)

Mihai T
Mihai T

Reputation: 17687

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>

Upvotes: 2

Related Questions