Streaming live at 10am (PST)

Parent hover elements


#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. 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 smile


#7

guys, can you post this public? This is really interesting 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. smile


#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.


#11