Change Color of element when different element is hovered

Question

I am trying to achieve on this page here - http://derbyshiregas.co.uk/ on the HOME PAGE within the OUR SERVICES section.

That when hovering over a services box both the text and the fa-icon/font awesome icon change colour on hover. I have got the text working but cannot get it working with the icon as well.

If someone could give us a little help with the CSS code I need to use for this it would be a big help.

Below is the current code I am using for the text... just cant get the fa-icon working with this.

    .service-nav-tab li a:hover, .service-nav-tab li.active a {
  background: linear-gradient(132deg, #e31372, #12a9c1, #5086bb, #6a10b4, #d49c10);
    background-size: 400% 400%;
      animation: BackgroundGradient 40s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Possible duplicate of [How to affect other elements when a div is hovered](https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered) — Heretic Monkey, Mar 13 '18 at 20:32

score 0 · Answer 1 · answered Mar 13 '18 at 18:36

You are including hover together with active or not showing all code of service-nav-tab.

Try this:

.service-nav-tab li.active a {
  background: linear-gradient(132deg, #e31372, #12a9c1, #5086bb, #6a10b4, #d49c10);
    background-size: 400% 400%;
      animation: BackgroundGradient 40s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.service-nav-tab li a:hover {
    background: linear-gradient(OTHER SET HERE);
    }

veratti · Accepted Answer · 2018-03-13T18:53:19.203

0

It appears that the pseudo element (FontAwesome's way of inserting an icon, eg: .fa .fa-fire:before) does not maintain the background colors that you've applied to the a tag.

Try adding the background and the -webkit-background-clip properties to the pseudo element itself - that has fixed it for me when playing with your css in dev tools.

.service-nav-tab li a:hover .fa:before {
  background: linear-gradient(132deg, #e31372, #12a9c1, #5086bb, #6a10b4, #d49c10);
  background-size: 400% 400%;
  animation: BackgroundGradient 40s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip
}

Edit: I don't have an explanation for why this fixes it, or why it fails in the first place. However, I tinkered a bit more with some properties and found that breaking out of the document flow causes the same problems even for the h4 containing your main text.

edited Mar 13 '18 at 18:53

answered Mar 13 '18 at 18:46

veratti

560
3
10

Hi, This has fixed the issue, only think I can not get working now for the .fa to be styled when active/selected. I have tried adding the .active and :after selectors but not having any luck – Harvey Mar 13 '18 at 21:03
published you code onto the site so you can see what I mean – Harvey Mar 13 '18 at 21:04
`.service-nav-tab li.active a .fa:before` is this the selector you tried? – veratti Mar 13 '18 at 21:11
Got you, I had tried this but must have not seen the affect happening. My bad. Thanks for the help – Harvey Mar 13 '18 at 23:48
Also, just to add on... How would I be able to tie this affect to the line underneath my nav menu current item? this is coded differently – Harvey Mar 14 '18 at 00:31

Change Color of element when different element is hovered

2 Answers2