Flexbox子链接颜色不跟随父元素:hover规则，如何实现联动过渡？

我想要创建Flexbox导航按钮，当仅在Flexbox子项（父选择器.item）上使用:hover伪类时，同时实现背景色和字体颜色的过渡效果。以下是我简化后的代码：

HTML代码 #

<div id="flex">
  <div class="item"><a href="#">Flex Hover Only</a></div>
  <div class="item"><a class="special" href="#">A Specified</a></div>
</div>

CSS代码 #

body {
  padding: 15px;
  background: black;
}

#flex {
  margin: 0 auto;
  width: 40vw;
  height: 10vh;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  gap: 10px;
  background: #1C6EA4;
  color: white;
}

.item {
  border: 1px solid blue;
  font-size: 22px;
  border-radius: 8px;
  background: #161616;
  color: white;
  line-height: 10vh;
  padding: 0px 10px;
  transition: .5s;
  transition-delay: .1s;
}

.item a {
  color: white;
  text-decoration: none;
  transition: .5s;
  transition-delay: .1s;
}

.item:hover {
  background-color: #a29bfe;
  color: black !important;
}

.special:hover {
  color: black;
}

目前我仅能通过指定.special类，让子链接自身hover时变色，但我希望父元素.item hover时，子链接也同步过渡颜色。请问这是否可行？我遗漏了什么？

当然可行，你遗漏的是通过父元素的:hover状态来选择子元素<a>，并设置其颜色变化的规则。

具体修改步骤：

• 移除.item:hover里的color: black !important;——这个样式只会作用在.item本身，无法传递给子链接<a>，而且!important会拉高样式优先级，不利于后续维护。
• 添加新的CSS规则，让父元素hover时同步修改子链接的颜色：

.item:hover a {
  color: black;
}

修改后的完整CSS代码：

body {
  padding: 15px;
  background: black;
}

#flex {
  margin: 0 auto;
  width: 40vw;
  height: 10vh;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  gap: 10px;
  background: #1C6EA4;
  color: white;
}

.item {
  border: 1px solid blue;
  font-size: 22px;
  border-radius: 8px;
  background: #161616;
  color: white;
  line-height: 10vh;
  padding: 0px 10px;
  transition: .5s;
  transition-delay: .1s;
}

.item a {
  color: white;
  text-decoration: none;
  transition: .5s;
  transition-delay: .1s;
}

.item:hover {
  background-color: #a29bfe;
}

.item:hover a {
  color: black;
}

.special:hover {
  color: black;
}

这样当鼠标悬停在.item上时，父元素的背景色会平滑过渡，同时子链接<a>的文字颜色也会同步完成过渡，完全满足你的需求。

内容的提问来源于stack exchange，提问作者David Wahlstrom