CSS deep elements to hover

Question

I'm confused with deep elements to make them looks like different on :hover

for example i've this html code (of course I've another sub div's but removed for this example)

I would like the .fb:before icon to change it's color on hover

#sub .ligne2 .suivi .fb:before {
  font-family: 'fontawesome';
  content: "\e616";
  color: black;
}

#sub>.ligne2>.suivi>.fb:hover #sub>.ligne2>.suivi>.fb:before {
  font-family: 'fontawesome';
  content: "\e616";
  color: red;
}

<div id="sub">
  <div class="ligne2">
    <div class="suivi">
      <div class="title">Social</div>
      <span class="fb"></span>
      <span class="pinterest"></span>
    </div>
  </div>
</div>

The codepen

I've tried many css solutions without getting the proper result. Especially by reading this StackOverflow post : How to affect other elements when a div is hovered

Thanks for your help

Sebastien

`#sub>.ligne2>.suivi>.fb:hover:before` I would also try and simplify your selectors, do you really need to qualify it from the sub all the way down? — Pete, Feb 01 '19 at 13:40
Have a read of this: https://www.sitepoint.com/optimizing-css-id-selectors-and-other-myths/ — Pete, Feb 01 '19 at 13:53
Yes as I've other "ligne1" and "ligne3" div's and sub divs. Yes it is complicated css but I'm sure one css class will not override another one else in the page — Sebastien R., Feb 01 '19 at 13:56
then try keep it as shallow as possible: `.ligne1 .fb:hover`, `.ligne2 .fb:hover`, etc If you are need four levels of selectors, there is something wrong with your classes (ie you are using the same classes on too many things that are not the same) - eg the class title may be too generic and used on too many elements - this is a suivi box so call it a suivi-title — Pete, Feb 01 '19 at 14:03

score 2 · Answer 1 · answered Feb 01 '19 at 13:42

2

this?

.suivi .fb::before {
  font-family: 'fontawesome';
  content: "\e616";
  color: black;
}

.suivi .fb:hover::before {
  font-family: 'fontawesome';
  content: "\e616";
  color: red;
}

<div id="sub">
  <div class="ligne2">
    <div class="suivi">
      <div class="title">Social</div>
      <span class="fb"></span>
      <span class="pinterest"></span>
    </div>
  </div>
</div>

answered Feb 01 '19 at 13:42

Onuralp Karataş

196
3
6

Thanks for your help ! – Sebastien R. Feb 01 '19 at 13:53

score 1 · Accepted Answer · answered Feb 01 '19 at 13:45

You can't set a hover event on a pseudo element, but you can change the pseudoelement based on the parent's hover event.

<style>
#sub {
  font-family:sans-serif;
  font-size:2em;
}

#sub .ligne2 .suivi .fb:before{
  font-family: 'fontawesome';
  content: "hello";
  color:red;
}

#sub .ligne2 .suivi .fb:hover:before {
  color: black;
}
</style>

<div id="sub">
    <div class="ligne2">
        <div class="suivi">
            <div class="title">Social</div>
            <span class="fb"></span>
            <span class="pinterest"></span>
        </div>
    </div> 
</div>

Here's a version of your codepen that works: https://codepen.io/justintemps/pen/pGeQPv

Thanks for your explanation and working codepen. I was not aware I had to target the befor on the same line as the hover. — Sebastien R., Feb 01 '19 at 13:53

user2243885 · Answer 3 · 2019-02-01T14:09:48.093

0

I hope this helps.

#sub .ligne2 .suivi .fb:before {
    font-family: 'fontawesome';
    content: "Test";
    color: black;
}

#sub > .ligne2 > .suivi > .fb:hover:before {
    color: red;
}

<div id="sub">
    <div class="ligne2">
        <div class="suivi">
            <div class="title">Social</div>
            <span class="fb"></span>
            <span class="pinterest"></span>
        </div>
    </div>
</div>

edited Feb 01 '19 at 14:09

answered Feb 01 '19 at 13:44

user2243885

73
5

Thanks for your help ! – Sebastien R. Feb 01 '19 at 13:54

CSS deep elements to hover

3 Answers3