Parent hover elements

Community resources Product feedback
1

Hi! I suggest that you implement a parent hover state in Webflow (when you hover a “father” element so the “sons” do the hover too). When I hover a box content and the button inside him make another behavior.

Like here: http://tempov3.webflow.io/
The buttons inside the “team area” could be hover when I pass the mouse over their blocks.

2

Hey @douglasrpinho this can be achieved by adding a hover interaction on a parent element that affects another element nested inside of it.

See this lesson to learn more about setting up hover interactions: http://help.webflow.com/lesson/hover-trigger-interaction

Please let me know if you have any questions. :smile:

Thank you,

Waldo

3

Hi @Waldo! It really helps but I can’t use all hover elements properties using this interaction, like change element color or background properties of the hovered element, you got? Maybe a simple implemenentation of these two options in interactions pannel could be done.

Thank you for your suggest!

4

Hey @douglasrpinho :smile:

Consider utilizing the opacity feature on nested elements for changing colors :wink: also. You can change backgrounds on hover by adding multiple background images to a div and selecting which one to display on hover vs when it’s static. :slight_smile:

Feel free to pm me for some examples. I’m working on some tutorials for these types of things. :smile:

Thanks,

Waldo

5

Hi @Waldo!

For simple hover state I can do like you said, but when this element is nested to other one I can’t change this properties by hovering his “father”. You have some example of this?

6

Hey @douglasrpinho I sent you a PM :slight_smile:

7

guys, can you post this public? This is really interesting :slight_smile:

8

http://menuz.webflow.io/ @helmi I’m playing around with some hover/menu interactions here. Just hover the Menu icon in the top right. I’m making a library of fun menu interactions I’ve made in Webflow and they’re not all linked up, so this is like showing my very incomplete work in progress haha.

What you can do is just set child elements to absolute and 100% width/height of an element, with opacity of 0%, then on hovering parent element you can set the hover interaction to affect nested elements and bring the opacity to 100% :smile:

You can do anything you put your mind to in Webflow. :smiley: :smiley: :smiley:

Let me know if you have any questions. This site will be updated throughout the following weeks as I build it out. :slight_smile:

1 Like
9

Hi @Waldo! Nice your example of menu button behavior! It is very creative way to use hover in Webflow. It is not your case but using opacity to hide/show elements like you said, you don’t think that is a “dirty” way to build interactions? I’m not expert in html/css but I though that duplicated elements could be avoided to have a clean code. What do you think about this? And yet I can’t make the same exemple like I said in first post (http://tempov3.webflow.io) by opacity interaction.

You have another example that you used that or an option to make my hover works?

10

Another example is here http://www.rokivo.com/work/tissot-milan-explorer/ on the bottom of page where is called “Start a project”. When you hover all the link area, the arrow icon do a nested interaction.