如何使悬停属性永久化？ [CSS]

Question

我将使用图像，否则可能很难理解。我们在网站的页脚中有这些社交图标，它们具有可爱的悬停状态，但是，如果没有悬停，我似乎无法复制它。

Facebook 图标：悬停未激活：

Facebook 图标：悬停活动：

我想复制悬停样式而不实际悬停。 HTML：

<li class="facebook">
    <a href="https://www.facebook.com/" target="_blank" title="Facebook">
        <span class="fa fa-facebook"></span>
    </a>
</li>

和css：

.social li.facebook a:hover {
  background-color: #325c94;
}
.social li.facebook a:hover * {
  color:#fff !important;
}

当从 css 中移除悬停状态时，会发生以下情况：

Facebook 图标：移除悬停：

我本来希望它看起来像活动的悬停状态，但事实并非如此，任何有关我的问题的意见将不胜感激。谢谢你。 - 莱昂

Answer 1

移除 :hover 伪类并将样式放在锚标记上以显示样式。

.social li.facebook a{
   color:#fff !important;
 }

Answer 2

为其添加边框半径 50%

.social li.facebook a:hover {
  background-color: #325c94;
  border-radius:50%;
}