时间戳

首页 > 解决方案 > 如何更改以下代码悬停时背景颜色的大小？

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

问题描述

我正在学习 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/

标签： htmlcss

解决方案

将您当前的 .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 来在元素之外创建空间。填充在元素内部创建空间。您提供的填充越多，悬停时背景就越大。

推荐阅读