将鼠标悬停在未占据标题全部高度的列表项上

Question

大家好，我正在使用 CSS 网格和 flexbox 一起创建标题。但我面临一个问题，在社交类上，当悬停在三个社交图标（Facebook、Twitter、Instagram）上时，我希望背景颜色为蓝色并占据标题的全部高度。目前，我猜它只占用了 flexbox 的高度。我该如何解决这个问题，这背后的原因是什么？谁能帮我解决这个问题？

我希望悬停效果是这样的 但我得到了这个：

这是我的 HTML：

<header class="head-container">
        <div class="head-info">
            <div class="contact">
                <ul>
                    <li>
                        <i class="fas fa-envelope"></i> Email:
                        <a href="#"> support@assignmentClassMate.com</a>
                    </li>
                    <li><i class="fas fa-phone"></i> Phone: +61-730-407-305</li>
                </ul>
            </div>
            <div class="social">
                <ul>
                    <li>
                        <a href="#"><b>My Account</b> </a>
                    </li>
                    <li>
                        Follow Us On:
                        <a href="#"><i class="fab fa-facebook"></i></a>
                    </li>
                    <li>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                    </li>
                    <li>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </li>
                </ul>
            </div>
        </div>
    </header>

这是我的 CSS 文件：

.head-container {
  padding: 15px 100px;
  background-color: #9e0b0b;
  color: #fff;
  font-family: sans-serif;
  font-size: 12px;
}

.head-container .head-info {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto auto;
      grid-template-columns: auto auto;
  padding: 5px;
}

.head-container .head-info .contact ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.head-container .head-info .social {
  height: 100%;
}

.head-container .head-info .social ul {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.head-container .head-info .social ul li a {
  margin: 0 5px;
}

.head-container .head-info .social ul li a i {
  font-size: 15px;
}

.head-container .head-info .social ul li a:hover {
  background-color: blue;
}

.head-container li {
  padding: 0 5px;
}

.head-container a {
  color: #fff;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
  margin: 0;
}

ul {
  list-style-type: none;
}

li a {
  text-decoration: none;
}

Answer 1

问题是，你给你的.head-container 一个填充。通过此填充，您的 .head-container 的背景颜色无法与任何内部元素重叠。

除了给.head-container 一个填充之外，您还可以轻松地给容器内的元素一个填充。 当您删除 .head-container 和 .head-container .head-info 的填充并添加一些到 .head-container .head-info .social ul li a

.head-container .head-info .social ul li a {
    margin: 0 5px;
    display: block;
    padding: 10px;
}

你得到你正在寻找的结果。

（注意，将显示设置为阻塞很重要，否则填充将无法正确影响元素）

当然，您必须给.head-container .head-info .contact 一些填充或使用一些弹性框属性，以便文本居中。

要在左右边框/边缘之间留出一些空间，您可以给.head-container 或.head-info 一些填充，如下所示：padding: 0px, 100px, 0px 100px;。不要在这些类的顶部或底部设置任何填充，这一点很重要。否则，您将收到与您描述的相同的问题。

Answer 2

我认为您不应该设置实际的a 标签的样式，而是将背景颜色赋予li 元素。您需要添加以下样式。

.head-container .head-info .social ul li {
  height: 100%;
}

.head-container .head-info .social ul li:hover {
  background-color: blue;
}

如果您只想要图标的悬停功能，那么您可以这样做：

.head-container .head-info .social ul li.icon {
  height: 100%;
}

.head-container .head-info .social ul li.icon:hover {
  background-color: blue;
}

<div class="social">
  <ul>
    <li>
      <a href="#"><b>My Account</b> </a>
    </li>
    <li>
      Follow Us On:
    </li>
    <li class="icon">
      <a href="#"><i class="fab fa-facebook"></i></a>
    </li>
    <li class="icon">
      <a href="#"><i class="fab fa-twitter"></i></a>
    </li>
    <li class="icon">
      <a href="#"><i class="fab fa-instagram"></i></a>
    </li>
  </ul>
</div>

如果这不能回答您的问题，请告诉我。