I want to create a bar that changes colour when the tab is hovered or selected …
I started creating it as a divblock with a background but the colour does not change when hovered…
In that case you’ll need to create a custom interaction with the Tab Link selected which gives you the option to use Tab Change as the trigger for the interaction.
Yes they do - right below Select an action… is the option for Custom animation. If you click Start an animation it will bring up a list of existing custom animations you can pick from. You’ll likely need to create a new custom animation to achieve what you’re looking for.
I’d recommend the Interactions & animations course on Webflow university if this is your first time doing custom animations. Interactions & animations course - Webflow University Courses
This is what the menu changes to when you click Start an animation. When you click the plus sign below the Start an animation dropdown it will change to the next image
Here you can name the animation and add the actions by selecting the element’s property you’re looking to change and clicking the plus sign next to Actions.
Here’s what the popover menu looks like when clicking the plus sign next to Actions. This is the list of all the different things you can do with interactions, including changing Background color, Border color, and Text color.
but unfortunately when I tried it, the line itself needs to be hovered/ clicked but I want it to change when the user clicks “security text” or around it …
I tried getting the html code for the line and put it in an embed element so it changes colour with the typography like the symbol and text but again no luck
Works great !! A reminder for anyone using it for tabs! (remember to style the tab that isn’t the “current” tab first ! and give them all the same class name <3