Override Cursor with Custom Image

mdrewbrennan · October 12, 2016

im trying to override all cursors with an egg. yes you read that correctly, i want the cursor to be a tiny fried egg, please dont ask why.

i used this from a previous discussion board but it didnt work: { cursor: e-resize; } or {cursor: url(images/my-cursor.png), auto;}

any ideas?!??!?!?!?!??!?!?!?

oh my site is maggiedrewbrennan.com in case you were curious. an egg would be perfect for it.

Edited October 12, 2016 by mdrewbrennan
Initial Revision

wwrightiv · October 12, 2016

Hey first off your website looks great. Secondly have you tried:

<style type="text/css">
body, html {
     cursor: url(imagelinkhere.gif), auto;
   }
</style>

in your header code injection?

Also try to create your cursor image as a small gif. Here's a fiddle: http://jsfiddle.net/q94EV/342/

Auto is the default cursor and was overriding your .png. I don't know exactly why it didn't like your .png file, but I'd stick with small .gif files

Edited October 12, 2016 by wwrightiv

mdrewbrennan · October 14, 2016

yaaaaaaaa it works! THANK YOU! is there a code so it overrides every type of cursor (roll-over, hover, etc)?

ALSO i want to do this: http://www.cornify.com/

you see that fancy pants rainbow background that follows your mouse? dang, thats a beauty - any idea?

haileyyork · May 8, 2018

Hey I am trying to add this as my cursor

any idea how to save it and make it a URL for me to use as my cursor?

flearound · June 18, 2018

Hi guys! Any idea how can use an emoji code as a cursor instead of a .png or .gif?

Question