Streaming live at 10am (PST)

How do I make other elements change colour on hover


#1

You'll see I have elements on this page:

http://edgepetrolshowcase.webflow.io

On the 3 petrol goals, I want to make it so that when I hover over the box, both the title and the icon background go green.

Any ideas on how to do this?!

Thank you!


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


#2

Hi @StudioSixty-One

Can you give me your read-only link? Makes it easier for me to explain to you how you can do it :slight_smile:


#3

Hey Thanks for the help!

https://preview.webflow.com/preview/edgepetrolshowcase?preview=5b4c8671f6a55f6f2e277a0c15ae5a5a


#4

Allright!

  1. Set the div "Goal" to position: relative.

  2. Give the image element (the icon) inside Goal Vector Icon div a class.

  3. Duplicate the Title text and Vector Icons div and style them exactly like the original state, except for their backgrounds, which now will be green. I named them Goal Title Hover and Goal Vector Hover

  4. Set them both to position: absolute and align them so they are overlaying the original title and vector.

  5. Set them both to opacity 0%. and the Goal Vector Hover div a z-index of 3.

  6. Select the Goal div. Add an interaction --> hover.

  7. On the first trigger: Affect other element and type in Goal Title Hover. Set hover on to opacity 100% and hover out to 0 %.
  8. Repeat step 7 but type in Goal Vector Hover.
  9. This step should be...Tadaa! :slight_smile:
  10. When applying the same procedure to the other 2 goal elements, you need to tick either one of the "limit to nested/sibling element". Try out which one.
  11. You might need to adjust the position settings on tablet/mobile.

Here's some screens to make it easier to understand:


#5

Thank you so much for the help! I'll try this out.

Thanks!


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.