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

• on
• on -turn off (hover)
• off
• off - turn on (hover)
• startup (intro only)

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.