Bootstrap 社交按钮背景颜色和悬停问题答案

【问题标题】：Bootstrap Social Buttons Background Color and Hovering IssueBootstrap 社交按钮背景颜色和悬停问题
【发布时间】：2020-03-11 13:18:05
【问题描述】：

我正在使用 Bootstrap 为 Facebook 和 LinkedIn 创建社交按钮。当我将按钮的背景颜色设置为白色时，它没有正确覆盖按钮。白色背景开始覆盖社交按钮之外。看起来像这样：

我将其设置为白色，因为如果我不这样做，字母就会变成与灰色背景相同的颜色。

这是我在 CSS 中设置的代码：

.social a {
  font-size: 4.5em;
  padding: 1rem;
}

.fa-facebook {
  background-color: white;
  color: #3b5998;
}

.fa-linkedin {
  background-color: white;
  color: #0e76a8;
}

.fa-facebook:hover, .fa-linkedin:hover {
  color: #d5d5d5;
}

这是我在 HTML 中的代码：

<div class="container-fluid padding">
    <div style="padding: 0px; margin: 0px;" class="row text-center padding">
        <div style="padding: 0px; margin: 0px;"  class="col-12 social">
            <a href="https://www.facebook.com/westernUBT/"><i class="fab fa-facebook"></i></a>
            <a href="https://www.linkedin.com/company/western-hasp/"><i class="fab fa-linkedin"></i></a>
        </div>
    </div>
</div>

此外，当我将鼠标悬停在按钮上时，它似乎检测到来自社交媒体图标区域之外的点击。就像如果我将鼠标悬停在社交媒体图标附近的灰色区域，它似乎会检测到它，但我不知道为什么。

【问题讨论】：

它悬停在填充物上

标签： html css bootstrap-4

【解决方案1】：

你可以使用伪元素:after来解决它。
首先，从图标中删除白色背景。然后，将position: relative 添加到图标中，因为伪元素将被绝对定位。

图标必须在这个新的伪元素前面。也就是说，:before 将具有更高的z-index。

因此，您将其放置在中心就足以产生您需要的白色效果。
它可能不适用于所有不同的图标。

CSS：

body {
  background-color: #333
}
.social a {
  font-size: 4.5em;
  padding: 1rem;
}

.fa-facebook {
  color: #3b5998;
}

.fa-linkedin {
  color: #0e76a8;
}

.fa-facebook:hover, .fa-linkedin:hover {
  color: #d5d5d5;
}

.social i {
  position: relative;
}

.social i:before {
  position: relative;
  z-index: 1;
}

.social i:after {
  content: '';
  background-color: #fff;
  position: absolute;
  height: 88%;
  width: 88%;
  left: 6%;
  top: 6%;
}

对于点击区域问题，您可以用边距替换填充，并将字体大小用于图标本身（<i>）而不是<a>。

【讨论】：