社交媒体李嘉诚效应

Question

我想要做的是，我会根据li:hover类给出i颜色，但不知何故我不能。也就是。如果它在i.fa-facebook-f类中有social_bookmarks类，我希望li:hover背景色为红色。

​

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

在CSS中没有父选择器，所以您不能以fa-facebook-f为目标将样式应用于它的父级。因此，您需要使用JavaScript或向li中添加包含fa-facebook-f的新类。

示例：

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

我想你只想让图标本身在:hover上得到背景色，而不是整行。在本例中，将.fab类添加到选择器中，如´.social_bookmarks li：´.social_bookmarks li：´.social_bookmarks.background{.}and similar for the other icon classes. That way only the icon which is a子of thel`将被分配为背景色

​

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

尝尝这个

​

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

​