Streaming live at 10am (PST)

Apparent conflict between hover and animation

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 ?

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.