social media li hover effect

Question

what I want to do is I will give li:hover color according to the i class, but somehow I could not. namely. If it has i.fa-facebook-f class in social_bookmarks class, I want li:hover background color to be red.

body {
  color: black;
}

.social_bookmarks {
  height: 30px;
  z-index: 150;
  -webkit-backface-visibility: hidden;
  margin: 0 0 0 -9px;
}

.social_bookmarks li:hover {
  background: red;
}

<div>
  <ul class="social_bookmarks">
    <li>
      <a href="https://www.facebook.com/">
        <i class="fab fa-facebook-f"></i>
      </a>
    </li>
    <li>
      <a href="https://www.youtube.com/">
        <i class="fab fa-youtube"></i>
      </a>
    </li>
    <li>
      <a href="https://www.twitter.com/">
        <i class="fab fa-twitter"></i>
      </a>
    </li>
  </ul>
</div>

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

There are no parent selectors in CSS so you can not target `fa-facebook-f `to apply style to its parents. so you will need to use JavaScript or add new class to `li `that has `fa-facebook-f ` in it. — ikiK, Sep 19 '20 at 15:17

Johannes · Answer 1 · 2020-09-19T15:22:24.650

1

I suppose you want only the icon itself to get that background-color on :hover, not the full line. In this case, add the .fab class to your selector, like ´.social_bookmarks li:hover .fa-twitter { ... }and similar for the other icon classes. That way only the icon which is achildof theli` will be assigned that background-color

body {
  color: black;
}

.social_bookmarks {
  height: 30px;
  z-index: 150;
  -webkit-backface-visibility: hidden;
  margin: 0 0 0 -9px;
}

.social_bookmarks li:hover .fa-facebook-f {
  background: red;
}
.social_bookmarks li:hover .fa-youtube {
  background: yellow;
}
.social_bookmarks li:hover .fa-twitter {
  background: pink;
}

<div>
  <ul class="social_bookmarks">
    <li>
      <a href="https://www.facebook.com/">
        <i class="fab fa-facebook-f"></i>
      </a>
    </li>
    <li>
      <a href="https://www.youtube.com/">
        <i class="fab fa-youtube"></i>
      </a>
    </li>
    <li>
      <a href="https://www.twitter.com/">
        <i class="fab fa-twitter"></i>
      </a>
    </li>
  </ul>
</div>

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

edited Sep 19 '20 at 15:22

answered Sep 19 '20 at 15:17

Johannes

53,485
15
52
104

I think you misunderstood me. I will give li: hover according to the "i" class. – Mesut Bla Sep 19 '20 at 15:19
"hover color according to the "i" class" preaty sure OP wants to target different colors based on facebook, twiter etc.. – ikiK Sep 19 '20 at 15:19
do you mean you want different hover classes depending on the different icons? – Johannes Sep 19 '20 at 15:20
@ikik You understood me, but I guess friends did not understand. – Mesut Bla Sep 19 '20 at 15:21
I just edited my answer - is this what you want? – Johannes Sep 19 '20 at 15:22
class background color – Mesut Bla Sep 19 '20 at 15:24
You already have hover background colors for `li` in your question code - it's not clear what you want? (The `li`s don't have any classes in your code) – Johannes Sep 19 '20 at 15:25
Ah, okay, now I get it: You want the parent (`li`) background depending on its hovered child's class (`i`). But there are no parent selectors in CSS. You'd have to use Javascript/jQuery for that. – Johannes Sep 19 '20 at 15:27
ahh exactly. so how can i do Can you help? – Mesut Bla Sep 19 '20 at 15:28
Well, the accepted answer contains the JS code you need. – Johannes Sep 19 '20 at 16:14

score 1 · Accepted Answer · answered Sep 19 '20 at 15:33

There are no parent selectors in CSS so you can not target fa-facebook-f to apply style to its parents. so you will need to use JavaScript or add new class to li that has fa-facebook-f in it.

Example:

document.querySelectorAll('ul.social_bookmarks > li * i').forEach(i => {
  //for each i
  if (i.classList.contains("fa-facebook-f") === true) {
//check if it contains facebook
    i.parentElement.parentElement.classList.add("facebook");
//add class to its parent/parent element with is li
  }
  if (i.classList.contains("fa-youtube") === true) {
    i.parentElement.parentElement.classList.add("youtube");
  }
  if (i.classList.contains("fa-twitter") === true) {
    i.parentElement.parentElement.classList.add("twitter");
  }
});

body {
  color: black;
}

.social_bookmarks {
  height: 30px;
  z-index: 150;
  -webkit-backface-visibility: hidden;
  margin: 0 0 0 -9px;
}

.facebook:hover {
  background: red;
}

.youtube:hover {
  background: blue;
}

.twitter:hover {
  background: gray;
}

<div>
  <ul class="social_bookmarks">
    <li>
      <a href="https://www.facebook.com/">
        <i class="fab fa-facebook-f"></i>
      </a>
    </li>
    <li>
      <a href="https://www.youtube.com/">
        <i class="fab fa-youtube"></i>
      </a>
    </li>
    <li>
      <a href="https://www.twitter.com/">
        <i class="fab fa-twitter"></i>
      </a>
    </li>
  </ul>
</div>

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

Rayees AC · Answer 3 · 2020-09-19T15:36:42.760

try this

body {
  color: black;
}
a{text-decoration:none;}
.social_bookmarks {
  z-index: 150;
  -webkit-backface-visibility: hidden;
  margin: 0 0 0 -9px;
  list-style:none;
}
.social_bookmarks  li{display:inline-block;margin:10px;}
.social_bookmarks  li i{
  border-radius:50%;
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.social_bookmarks li:hover .fa-facebook-f{
  background: #3b5a9a;
  color:#fff;
}
.social_bookmarks li:hover .fa-youtube{
  background: #f03a37;
  color:#fff;
}
.social_bookmarks li:hover .fa-twitter{
  background: #1aa9e1;
  color:#fff;
}

<div>
  <ul class="social_bookmarks">
    <li>
      <a href="https://www.facebook.com/">
        <i class="fab fa-facebook-f"></i>
      </a>
    </li>
    <li>
      <a href="https://www.youtube.com/">
        <i class="fab fa-youtube"></i>
      </a>
    </li>
    <li>
      <a href="https://www.twitter.com/">
        <i class="fab fa-twitter"></i>
      </a>
    </li>
  </ul>
</div>

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

change class background color – Mesut Bla Sep 19 '20 at 15:25 — Mesut Bla, Sep 19 '20 at 15:25

social media li hover effect

3 Answers3