如何更改以下代码悬停时背景颜色的大小？答案

【问题标题】：How to change size of the background color on hover for the following code?如何更改以下代码悬停时背景颜色的大小？
【发布时间】：2020-10-04 18:45:07
【问题描述】：

我正在学习 CSS 悬停和菜单，你可以在这里看到

document.getElementsByTagName("h1")[0].style.fontSize = "6vw";

$brandColor: darkorchid;
body {
  font-family: system-ui;
  background: linear-gradient(to bottom, $brandColor, darken($brandColor, 15%));
  color: white;
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}

.header {
  height: 100px;
  background-color: #252e38;
  display: flex;
}

.menu {
  margin: auto 0;
  border: thick #FFAA03;
}

.menu ul {
  list-style-type: none;
  display: inline-flex;
  /*display:inline-block;*/
}

.menu ul li {
  padding-right: 15px;
  color: white;
  /*padding-top: 25px;*/
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  /*margin-top: auto;
    margin-bottom: auto;*/
  padding-top: auto;
  padding-bottom: auto;
  /*    padding: 2px 10px;  /*newly added code*/
}

.menu ul li:hover {
  background-color: #0ab2d2;
  /*height: 100%;*/
  /*hover is not fully correct*/
  /*padding: 27px 7px;*/
  text-decoration: none;
}

<header class="header">
  <div class="logo">
    <!--<img src="images/logo.png" alt="logo"/>--></div>
  <div class="menu">
    <ul>
      <li class="3">Home</li>
      <li class="3">About Us</li>
      <li class="3">Blog</li>
      <li class="3">Contact</li>
    </ul>
  </div>
  <div class="socialIcon">

  </div>
  <div class="searchIcon">

  </div>
</header>

代码笔： https://codepen.io/Software_ss/pen/YzqmRMb

悬停时背景颜色会发生变化，但尺寸会变小。

如何在悬停时更改其背景大小，例如此菜单？什么我需要改变，我不明白，请帮助。

https://mofizuddin12.github.io/Nemo-ipsam-voluptatem-H.W/

【问题讨论】：

您的意思是，您希望整个菜单在悬停时改变颜色，或者只是希望悬停更大？

标签： html css

【解决方案1】：

您可以使用padding: 15px; 在元素周围添加填充，而不是padding-right: 15px;。 padding-right 只会在元素框的右侧内侧添加15px 空间，但要产生您想要的效果，您需要在内框周围应用空间。

所以不是

.menu ul li{
   padding-right: 15px;
   /* rest of its style */
}

你的代码应该是这样的：

.menu ul li{
   padding: 15px;
   /* rest of its style */
}

它的最终形式是这样的：

$brandColor: darkorchid;
body {
  font-family: system-ui;
  background: linear-gradient(to bottom, $brandColor, darken($brandColor, 15%));
  color: white;
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}

.header {
  height: 100px;
  background-color: #252e38;
  display: flex;
}

.menu {
  margin: auto 0;
  border: thick #FFAA03;
}

.menu ul {
  list-style-type: none;
  display: inline-flex;
}

.menu ul li {
  padding: 15px;
  color: white;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  padding-top: auto;
  padding-bottom: auto;
}

.menu ul li:hover {
  background-color: #0ab2d2;
  text-decoration: none;
}

<header class="header">
  <div class="menu">
    <ul>
      <li class="3">Home</li>
      <li class="3">About Us</li>
      <li class="3">Blog</li>
      <li class="3">Contact</li>
    </ul>
  </div>
</header>

注意：您可以阅读更多关于padding 工作原理here。

【讨论】：

【解决方案2】：

将您当前的 .menu ul li 更改为：

.menu ul li{
    margin-right: 15px;
  padding: 10px 10px;
    color: white;
    /*padding-top: 25px;*/
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    /*margin-top: auto;
    margin-bottom: auto;*/
    padding-top: auto;
    padding-bottom: auto;
}

至于解释。除了您使用的 padding-right ，您可以使用 margin-right 来创建元素 outside 的空间。填充在元素的内部创建空间。您提供的填充越多，悬停时背景就越大。

【讨论】：