Streaming live at 10am (PST)

Changing a Div on Hover

Hi,

image

The above is my current Navbar, however, on hover I want the interaction to change the Dropdown Trigger white with a curved top left border. I’ve already created a class for the it but I can’t seem to find a way to execute it. This is how it looks with that class applied.

image

Thank you so much for any advice or help!

Here is my public share link: LINK
(how to access public share link)

Your link does not work for me, could you add it once again?

Hi,
I just added it. Thank you in Advance for your help.

Here it is again

I have an idea, I am not sure whether it is the best one, but maybe it will work for you.

First you have to add the same class for every “text block” in your dropdown. Then start a mouse hover interaction for the “dropdown”.

In this interaction at first you set the “dropdown trigger” background color to transparent and “(here should be your class for the text block)” to white – set both as initial state, affect class > only children with this class.

Then add another action that changes the “dropdown trigger” background color to white and “(here should be your class for the text block)” text color to the one on your navbar and it should affect “class – only children with this class”.

For the hover out animation, you can just duplicate the first interaction and delete the actions with applied changes, so that there would stay only bg color transparent + white text, however remember to uncheck the “initial state”.

Lastly, you can add this animations to each dropdown, that you want to affect. I hope this helps, but if you have any questions I can try to attach some screenshots.

1 Like

Thank you so much Lena, some of it did go over my head so if it isn’t too much trouble the screenshots would greatly help.

Much appreciated

It was easier this way, hope it helps. https://files.fm/f/yv7h753pc#

1 Like

This is so kind of you! Thank you so much for your help. Really Appreciate it Lena.

1 Like