Hover interaction problem. Want different hover state when button is active vs inactive

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.

Live Link

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.

Read-only link
https://preview.webflow.com/preview/julians-account-manager?utm_medium=preview_link&utm_source=dashboard&utm_content=julians-account-manager&preview=ea1078d7f3bf98b977ed352a29e1800a&mode=preview

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.

Hello @julianbreheny,

Welcome to the community!! You need to style your tabs on hover and on current state. When your tab is select the current tag will be active and you can style it however you want. I hope this helps.

Thanks so much for the welcome @Pablo_Cortes! And for your help as well!

The issue is that I don’t just want to change the styling, I want different text. So when I hover initially it says ‘add spreadsheet’, then if the button is clicked the hover says ‘remove spreadsheet’.

Does that make sense? Sorry it’s a weird request

Hello @julianbreheny,

Ok I got it now. So what you need to do is to on your tabs, if they are buttons, change them to link blocks, then add a hide/show interaction to show a text block when clicked and to hide it when hover out. I hope this makes sense. Let me know if you have any questions.

How does one hide/show interactions based on link states? I’m trying to do this now… I have a ‘Current’ link block with interactions, and I’d like to create a new interaction for it, or even simply stop the applied interaction. But, when I try to remove the interaction with the ‘Current’ link block selected, I get a warning that says it will affect all of the link classes. How do I create a different interaction (hover or not) when in Current state? Or, even as you said, hide/show the interaction when active/‘Current’? Thanks!

Hello @rps,

so to do an interaction on the current state make sure that before you start the interaction the current state combo class on your link block is selected/activated. I hope this makes sense. Let me know how it goes.

I have that figured out, but if I try to remove the interaction, it doesn’t think I’m deleting it for the combo class, but for every class it’s applied to, and so warns me. As you mentioned, above, how do you simply “hide/show” an interaction for the currently selected “Current” combo class link block?

EDIT: After some experimenting, it seems like I might have to change the interaction in the “Trigger settings” area from Class to Element… but, then that means I have to manually apply them (in and out hovers) to a 5x4 grid of thumbnails manually. Is this seriously the only way? Kinda defeats the purpose of using “Class” triggers :frowning:

EDIT 2: OK, even after manually changing the interactions, “Current” seems to be ignored. So, again… How does one “hide/show” an interaction for “Current?” Literally working on this all day, and still haven’t found out how. Like 8 hours… :frowning:

Hello @rps,

what are you trying to accomplish with the interaction? I mean if it is a button or a tab that you need to style with an interaction, then you will have to do a separate on first click interaction of the element associated with the tab or the button. Im having a hard time understanding your issue and what you are trying to accomplish.

I am trying to do a thumbnail navigation grid… like what a lot of Squarespace sites have. I got some great feedback from Webflow directly. Basically, the “Current” tag is not acknowledged by interactions, and another false try was thinking Current was recognized by children of the Current parent. So, getting back to your “show/hide” I finally figured out that I basically have to layer divs appropriately, so I can use CSS to show or hide the “current” state I want to show.

Screen Shot 2019-12-27 at 11.49.29 AM

So, the hover interactions on the thumb are just always there, and the Link Block is set at 0% opacity. Then, when the Link Block is Current, the Current state sets it to 100% opacity, then I have it look how I want that way. Anyway… getting back into this. Takes some trial and error, but knowing that something is NOT possible often helps more. I.e. there’s no simple way to “show/hide” an interaction, as interactions ignore Current. BUT, there’s still usually a way! Thanks!

2 Likes