如何在悬停时更改 flexbox 项目边距的颜色？

Question

我正在尝试创建一个响应式导航栏，其中每个项目在悬停时都会突出显示其背景（颜色更改为更高的饱和度）。但是，only the link text gets highlighted.

我正在使用均匀分布的 flexbox 容器，加上带有 margin-right:auto 的徽标，因此它固定在左侧。

我想要的是得到整个space (as seen in the dev console ) 在悬停时突出显示。在四处挖掘之后，我相信使用 dev-console 突出显示的区域是边距，因此是问题标题。

我使用填充解决了这个问题，但它看起来很粗略，它跳来跳去，所以它远非理想。

这是我的代码：

* {
  margin: 0;
  padding: 0;
}

.top-nav {
  background-color: rgb(148, 174, 186);
  height: 120px;
  display: flex;
  justify-content: space-evenly;
}

.logo {
  height: 100px;
  margin-right: auto;
}

.nav-links {
  font-family: 'Montserrat';
  font-style: bold;
  text-align: center;
  margin: auto;
  font-size: 45px;
  color: white;
  text-decoration: wavy; //don't mind this, just how I managed to clear the links default styling
  height: auto;
}

.nav-links:hover {
  background: rgb(39, 136, 180);
  color: black;
}

<div class="top-nav">
  <a class="logo-link" href="index.html"><img class="logo" src=img/Logotipo.png> </img>
  </a>
  <a class="nav-links" href=m y-bio.html>MY BIO</a>
  <a class="nav-links" href=e xperience.html>EXPERIENCE</a>
  <a class="nav-links" href=projects.html>PROJECTS</a>
  <a class="nav-links" href=hire-me.html>HIRE ME!</a>
</div>

我正在考虑将链接制作成 div，但我担心它最终会得到相同的结果。

Answer 1

您不能为边距值添加背景颜色，这是不可能的。如果您希望它出现在链接中，请将以下内容添加到您的 .nav-links class:

.nav-links {
  padding: 1rem;
  transition: .2s;
}

如果你想让菜单项填满父元素的整个高度，效果相同，你可以这样做：

.nav-links {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  transition: .2s;
}

虽然我不太确定我知道你想要实现什么。

如何在悬停时更改 flexbox 项目边距的颜色？

How to change a flexbox item margin's color on hover?

html

css