Question

我的css中有社交平台的div。我想在悬停时更改每个平台的颜色。他们在<span>。如何在CSS中找到它？这是HTML：

<div class="content">


<ul class="social-media-links--platforms platforms inline horizontal">
      <li>
      <a href="https://www.facebook.com/u" target="_blank">
        <span class="fa fa-facebook fa-4x"></span>
      </a>

          </li>
      <li>
      <a href="https://www.instagram.com/u" target="_blank">
        <span class="fa fa-instagram fa-4x"></span>
      </a>

          </li>
      <li>
      <a href="https://www.twitter.com/u" target="_blank">
        <span class="fa fa-twitter fa-4x"></span>
      </a>

          </li>
  </ul>

    </div>

这就是我改变所有社交链接的方式：

.social-media-links--platforms a{  
    color: #fffff0;
}

现在我想在悬停时添加不同的颜色。这不起作用：

.fa.fa-instagram.fa-4x a:hover{
    color: black;
}

@EDIT

它几乎可以，但是当我将鼠标移出图标时它会成为一秒的标准链接颜色：不悬停（白色） - ＆gt;悬停（媒体的颜色） - ＆gt;不悬停（标准链接颜色一秒） - ＆gt;再次白了

Answer 1

你的fa-class在你的元素中。试试这个：

a:hover .fa.fa-instagram.fa-4x {
    color: black;
}

如何在悬停时更改<span>颜色

1 个答案: