Custom Cursor on Hover

Hi! 

Currently I have a very cute custom emoji cursor, using the code below. How can I then, change the hover cursor to be a different emoji? 

// Emoji Cursor //

body, html {
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='50' height='60' viewport='0 0 100 100' style='fill:black;font-size:30px;'><text y='50%'>🍊</text></svg>") 16 0,auto !important; /*emojicursor.app*/
  }

Try this as your starting point:

https://www.emojicursor.app/

@Ziggy Thanks for this, however, I'm still getting the default finger point when I hover over a link