Html 当悬停每个匹配元素时，如何高亮显示它们？

我被推荐为

我想知道的是，是否有可能使用CSS

我正在尝试使用

同级：~

，但它无法突出显示以前的同级元素

.test{
颜色：蓝色；
}
.测试：悬停，.测试：悬停~.测试{
颜色：红色；
光标：指针；
}

用鼠标在“蓝色”文本上测试突出显示：
这
是
这个
突出

据我所知，这是不可能的，因为CSS目前无法选择任何前面的元素，尽管您可以通过以下方式实现这种行为：

.test{
颜色：蓝色；
}
.x:悬停测试{
颜色：红色；
光标：指针；
}

用鼠标在“蓝色”文本上突出显示测试：
这
是
这个
突出

正如您所发现的那样，这是不可能的——因为CSS选择器缺乏向后遍历级联的能力——这在CSS中是可能的；但是谢谢你提醒我更新一个我至今完全忘记的答案。谢谢@DavidThomas，所以唯一的解决办法就是使用

javascript

，对吗？很遗憾，是的（CSS有一个建议的关系伪类，可能允许这样做，但在选择器级别4的早期，它似乎不太可能进入浏览器。如果我可以将

span

s包装到一个父元素中，那么我就不需要这个问题。答案比你的简单得多-

x:hover{color:red；}

x:hover>span{color:red；}

*但是是的，这和JS都没有什么关系