CSS hover modify self and other class

Question

I know there are a ton of answers on :hover effecting other classes. What I'm trying to do is change the font color of itself (.footer_status_tex) and background-color of another class (.footer_status_gear)

Simplified CSS - Something like this:

CSS

.footer_status_tex {
    cursor: pointer;
    color: #fff;
}
.footer_status_gear {
    width: 36px;
    height: 36px;
    background-color: #000;
}

.footer_status_tex: hover {
    color: #81aaf3;
}
.footer_status_tex:hover .footer_status_gear {
    background-color: #aba51e;
}

HTML

<div class="footer_status_tex" style="">Hello</div>
<div class="footer_status_gear"></div>

Current setup only changes font color.

Thanks

is `.footer_status_gear` a child element of `.foort_status_tex` ? — Christian Santos, Feb 03 '18 at 20:06

score 4 · Accepted Answer · answered Feb 03 '18 at 20:21

First, you need to fix the selector .footer_status_tex: hover, remove the gap after :.

Second, the selector .footer_status_tex:hover .footer_status_gear only works if the latter one is a child of the former one.

What you need is .footer_status_tex:hover + .footer_status_gear or ~ if the latter one is a sibling of the former one, also the latter one must be placed next to the former one in the DOM.

.footer_status_tex:hover {
  color: #81aaf3;
}

.footer_status_tex:hover + .footer_status_gear {
  background-color: #aba51e;
  height: 20px;
}

<div class="footer_status_tex">Hello</div>
<div class="footer_status_gear"></div>

score 1 · Answer 2 · answered Feb 03 '18 at 20:19

You can use ~ adjacent selector to target the adjacent elements

Stack Snippet

.footer_status_tex {
  cursor: pointer;
  color: #fff;
}

.footer_status_gear {
  width: 36px;
  height: 36px;
  background-color: #000;
}

.footer_status_tex:hover {
  color: #81aaf3;
}

.footer_status_tex:hover ~ .footer_status_gear {
  background-color: #aba51e;
}

<div class="footer_status_tex" style="">Hello</div>
<div class="footer_status_gear"></div>

score 0 · Answer 3 · answered Feb 03 '18 at 20:14

When posting CSS problems, please also include the associated HTML code as without it, we're can only assess half the problem.

I'm assuming this is your structure: https://codepen.io/barrymcgee/pen/vdGOra?editors=1100#

The reason why the background of .footer_status_gear doesn't change is because it's the parent element of the link. A :hover pseudo-class can only direct the children of the element to which it is applied.

If the assumption I made about your HTML structure is wrong, please provide it and I'll look again.

CSS hover modify self and other class

3 Answers3