社交媒体悬停效应

如何解决社交媒体悬停效应

我想做的是，我将根据li:hover类为i赋予颜色，但是不知何故。 即。如果它在social_bookmarks类中具有i.fa-facebook-f类，我希望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" />

解决方法

我想您只希望图标本身在:hover上获得该背景色，而不是整行。在这种情况下，请将.fab类添加到选择器中，例如´.social_bookmarks li：hover .fa-twitter {...} and similar for the other icon classes. That way only the icon which is a child of the li`将被分配背景颜色

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

,

CSS中没有父选择器，因此您无法定位fa-facebook-f为其父样式应用样式。因此您将需要使用JavaScript或向其中包含li的{​​{1}}添加新类。

示例：

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;
}

,

尝试

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