css - 不考虑背景颜色 rgba 不透明度的标签

Question

我有一个奇怪的情况:

在下面的代码片段中，当我尝试将 rgba 颜色应用于我的 a 标签时，它就像是 rgb 颜色，而不是 rgba。所以文本背景是纯色的，但背景的其余部分(来自 span 而不是 a)具有正确的不透明度。

我知道我可以将 :hover 查询分开，它会解决问题，但我想知道为什么要这样做？我做错了什么？

span {
  display: inline-block;
  padding: 5px;
  border: 2px solid #00bcd4;
  border-radius: 5px;
  margin: 5px;
  background: #ffffff;
  cursor: pointer;
}
span a {
  text-decoration: none;
  color: #00bcd4;
}
span:hover,
span:hover a {
  background: rgba(0, 188, 212, 0.5);
  color: #ffffff;
}

<span><a href="">Link</a></span>

Answer 1

span:hover,
span:hover a {
  background: rgba(0, 188, 212, 0.5);

这意味着您在跨度和中的“a”上设置了 50% 的不透明度背景。在“a”上，您会看到 50% 的背景，后面是跨度的背景，因此它会显得更暗。

解决方法:

span {
  display: inline-block;
  padding: 5px;
  border: 2px solid #00bcd4;
  border-radius: 5px;
  margin: 5px;
  background: #ffffff;
  cursor: pointer;
}
span a {
  text-decoration: none;
  color: #00bcd4;
}
span:hover {
  background: rgba(0, 188, 212, 0.5);
}
span:hover a {
  color: #ffffff;
}

<span><a href="">Link</a></span>