TLDR: I need a hover state on a button to say one thing when the button is inactive, and a different thing when the button is active. Slightly tough because I’m using custom code (isotope filtering and sorting) to make my whole site effect work.
Site concept: The idea is that as you click different buttons the image of me changes. For example, if you click ‘Comedy Writer’, a rubber chicken is added.
If you click ‘Marketing and Strategy’, a suit is added.
So there are a bunch of different combinations. I want this to be as simple for the user as possible, so when you hover over the button it says ‘Add suit’ etc. BUT the problem is, that once you click the button, and it is active, it still says ‘Add suit’ when you hover over it. I want it to say remove suit, or something.
Currently, I’ve just got interactions set up. When you hover over the button an interaction hides the initial element and then shows the hover state button. Then when you move the mouse off the button it reverses.
Thanks so much! I’m sure there is an easier solution I’m just not seeing!!! And I want this site perfect because I’d love to showcase it etc.