I have an icon that has 25% opacity in rest state.
Upon hovering, I set the opacity to 75%, to show the user this is an actionable item.
I set up an animation, such that when the user clicks on the icon, a panel toggles shown/hidden, and the icon’s opacity goes from 25% to 100%.
Evidently, there’s a conflict between these two interactions:
• The animation works fine, but the hover state doesn’t work.
• If I try instead of the hover state, to include a ‘hover’ animation in my main interaction, both things work, but, naturally, after clicking and upon leaving the icon, the mouse hovering out cancels the icon’s 100% opacity to the “hover out” state.
How do I do this very simple and common type of interaction ?