How to create a toggle with hover states that depend on which way it's toggled?

I'm making a button to play/pause the background music in my course.

I have it set up with 5 states

I have my hover triggers set to resume the previous state so that if the user accidentally hovers it's not stuck there forever.

But I think this means that the following happens

music is playing
- button state is "on"
user hovers over icon
- module stores "on" state as the one to return to after hover ends
- state changes to "on - hover"
user clicks icon
state changes to "off", and music stops
user stops hovering
- module reverts to stored state "on"

The expected behavior is that the click cancels the "resume previous state" behavior.

I think I can do this with two buttons that show/hide, with two states each, but I'd rather just have one.

Forum Discussion