Search code examples
htmlcssiosipadipados

CSS state for iPad Pro cursor hover


The new cursor on iPad Pro aims to fit buttons when hovered. Is there a state used in safari to create special hover for it ?

I would like to make a button looks like this on a website :

iPad Pro cursor fitting button on hover

Right now, hover state works but the cursor dot doesn’t disappear to fit the button.

Thanks for your help !


Solution

  • Unfortunately, Apple doesn’t let you change the iPadOS cursor appearance using the cursor property. There’s currently no way to interact with the iPadOS cursor other than reacting to :hover, :active, etc. pseudo-selectors. You can’t control the visibility or appearance of the cursor itself. It you want to simulate the iPadOS cursor hover appearance for devices other than the iPad, check out this CodePen: https://codepen.io/cezzre/pen/poJxLEM