将鼠标移到社交图标上时如何更改社交图标颜色？

Question

my site 有一个问题。我的网站上有社交图标栏，并且想在鼠标悬停时更改颜色。

我说的是这部分：

并且想在这个site：

提前致谢！

Answer 1

这是我自己做的工作解决方案。

  div.aio-icon:hover.advanced.faceboook {
  border-color: #3b5996;
  background-color: #3b5996;
  }
  div.aio-icon:hover.advanced.twitter {
  border-color: #29c5f6;
  background-color: #29c5f6;
  }
  div.aio-icon:hover.advanced.instagram {
  border-color: #b16c4f;
  background-color: #b16c4f;
  }
  div.aio-icon:hover.advanced.youtube{
  border-color: #f0251d;
  background-color: #f0251d;
  }
 div.aio-icon:hover.advanced.soundcloud{
  border-color: #ff6d00;
  background-color: #ff6d00;
  }

我为每个元素插入了适当的类。

Answer 2

您可能希望使用悬停选择器，但是对于每个链接的不同颜色，您需要将链接的类名放在图标类之前，如下所示：

.58ae1dbc7fa2c .aio-icon:hover {
      border-color: blue;
      background-color: blue;
    }

您可以将“蓝色”更改为您想要的任何蓝色阴影。

您还可以添加使用过渡属性来让颜色在悬停时淡入淡出，如下所示：

.58ae1dbc7fa2c .aio-icon:hover {
  border-color: blue;
  background-color: blue;
  transition: all .3s ease-in-out;
}