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

Question

大家好我正在使用 CSS grid 和 flexbox 一起创建一个 header。但是我在社交 class 上遇到了一个问题，将鼠标悬停在三个社交图标（Facebook、Twitter、Instagram）上时，我希望背景颜色为蓝色并占据 header.目前我猜它只占用了 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

我认为您不应该为实际的 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>

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

Answer 2

问题是，您给了 .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 一些填充或使用一些 flexbox 属性以便文本居中。

要在左右 border/edge 之间接收一些 space，您可以像这样给 .head-container 或 .head-info 一些填充：padding: 0px, 100px, 0px 100px;。重要的是不要在这些类的顶部或底部设置任何填充。否则您将收到与您描述的相同的问题。

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

hover over a list item not taking the full height of the header

html

css

flexbox

css-grid