This is definitely do-able, and it looks like you were already headed in the right direction.
Essentially, you’ll want to set up an interaction on the body. When hovering on the body, start your “custom cursor show” interaction. On hover out, play your “custom cursor hide” interaction.
This doesn’t work perfectly as-is, but a few small tweaks will fix it up:
You’re missing an initial state on your “show” interaction. Right now, when the page loads, the cursor is already at 100% opacity. By creating an initial state with an opacity of 0, the cursor starts at 0, then transitions to 100% once you hover on the body.
Once you do that, you’ll still be able to see the cursor moving into place once you start hovering. You can solve this by adding a 0.2s delay to the 100% opacity keyframe.
Your body hover interaction should look like this:
Your “custom cursor show” interaction should look like this:
Just tried this and it did work, but it meant that all the other elements which trigger the custom cursor to hide does not work. See how now on the navbar, the cursor is shown and can be seen above the nav links.
