Html Flexbox 链接 colored颜色 不符合父级规则

我正在try 创建一些Flexbox导航按钮，当仅在FlexBox项( Select 器的父项)上使用:hover psuedo类时，它们可以同时转换背景色和字体 colored颜色 .目前(和简化后的)这就是我所拥有的.

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;
}

虽然我可以指定在更具体地悬停时要更改的.Item链接文本(.Special类)，但我希望它在其父.Item悬停时转换.这有可能吗？如果可能，我错过了什么？

这是我的副手https://codepen.io/Davex/pen/poVeaye