如何实现div内两个a元素hover时同时切换颜色

问题原因 #

你现用的CSS选择器div.test-hover :hover中，.test-hover和:hover之间的空格属于后代选择符，规则匹配逻辑为「选中.test-hover容器内所有处于hover状态的后代元素」，因此仅当前被鼠标悬停的单个a标签会命中样式，无法实现全部a标签同时变色。

修复方案 #

将:hover伪类绑定到外层div容器上，匹配容器被悬停时内部所有的a标签即可，修改后的CSS代码如下：

div.test-hover:hover .article-title {
  color: #f20d20;
}

实现逻辑 #

当鼠标悬停在容器内任意a标签上时，鼠标同时处于外层.test-hover容器的悬停范围内，会触发div的:hover状态，此时选择器会命中容器内所有.article-title类的a元素，即可实现两个a标签同步切换字体颜色的效果。

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