如何修改导航栏hover状态下的文字颜色及全栏背景效果

1. hover时文字不变色问题 #

你为li元素设置的hover状态颜色属于继承样式，而你单独给.nav-links a指定了color: black的规则，直接指定元素的样式优先级远高于继承自父元素的样式，因此li的颜色修改无法作用到a标签上，即使加!important也不生效。
解决方法：将hover规则的选择器修改为指向hover状态下的子a标签：

/* 把原来的nav li:hover规则替换为如下写法，不需要加!important */
.nav-links li:hover a {
  color: white;
}

2. 导航项hover背景无法铺满整个导航栏高度问题 #

你的nav布局使用了align-items: center，这会让子元素（包含logo和.nav-links）高度自适应内容、垂直居中排列，不会拉伸到和nav等高。同时li的上下padding是固定值，如果nav的min-height:8vh实际渲染高度大于li总高度（上下padding+文字高度），就会出现上下留白。
解决方法：修改nav的对齐规则，同时让li内部居中内容：

nav {
  /* 保留原有属性，把align-items: center改成stretch */
  align-items: stretch;
}
.nav-links li {
  /* 保留原有属性，新增flex布局让文字垂直水平居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

3. hover导航项时修改整个导航栏背景色 #

可以使用CSS的:has()父选择器实现，该属性目前已支持所有主流现代浏览器：

/* 当nav下的li被hover时，修改整个nav的背景色 */
nav:has(.nav-links li:hover) {
  background-color: 自定义的导航栏背景色;
}

修改后完整可用CSS代码 #

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  min-height: 8vh;
  font-family: "Poppins", sans-serif;
  background-color: white;
  overflow: hidden;
}

.logo {
  color: black;
  text-transform: uppercase;
  letter-spacing: 10px;
  /* 让logo也垂直居中 */
  display: flex;
  align-items: center;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 20%;
  margin: 0;
}

.nav-links li {
  list-style: none;
  /* 去掉上下固定padding，由父元素拉伸自动撑满高度 */
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-links a {
  color: black;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 15px;
}

.nav-links li:hover {
  background-color: rgb(6, 168, 106);
}

.nav-links li:hover a {
  color: white;
}

/* 如需hover时整个导航栏变色，取消下方注释并修改颜色值即可 */
/*
nav:has(.nav-links li:hover) {
  background-color: #f0f0f0;
}
*/

内容的提问来源于stack exchange，提问作者Elijah Leis