时间戳

首页 > 解决方案 > 将鼠标悬停在未占据标题全部高度的列表项上

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

问题描述

大家好，我正在使用 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;
}

标签： htmlcssflexboxcss-grid

解决方案

问题是，你给了你.head-container一个填充。通过这种填充，不可能与.head-container任何内部元素的背景颜色重叠。

.head-container您可以轻松地为容器内的元素提供填充，而不是提供填充。当您删除 and 的填充.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 属性，以便文本居中。

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

推荐阅读