social media li hover effect [duplicate] - html

Question

This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 2 years ago.
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" />

Answer 1

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" />

Answer 2

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" />

Answer 3

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" />