如何使悬停属性永久化？ [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%;
}