html - CSS——链接 :hover color inheritance issue

Question

我真的对这里发生的事情感到困惑。我想知道为什么当光标在按钮内而不是直接在链接上时链接是白色的？当光标在按钮边界内时，我希望它是红色的。
我认为发生这种情况是因为此时页面继承了声明的 .links:a 颜色值，但我想知道如何让它覆盖它？ .links:hover 似乎没有将继承转移给 .links a:hover (?)
任何帮助将不胜感激!!

.links a{
  color:white;
  text-decoration:none;
}
.links:hover{
  background-color:white;
  color:red;
}

.links a:hover{
  background-color:white;
  color:red;
}

https://jsfiddle.net/3dujymLk/1/

Answer 1

您的规则完全按照您编写的方式运行。如果您希望 a 文本在悬停在整个 div 上时变为红色，您需要一个规则。添加这样的内容:

.links:hover a {
    color: red;
}

如果不明显，这会控制悬停在 div 上时链接的文本颜色。