Css 悬停在div上显示灰色图像，悬停在灰色图像上显示彩色图像

我想这样做：
在div中显示文本，悬停时在文本旁边显示灰色图像
并将鼠标悬停在灰色图像上显示彩色图像

以下是我迄今为止所做的：

HTML:

<div class='line'>text text 1<a href='#1'><div class='image'>
</div></a></div>

<div class='line'>text text 2<a href='#2'><div class='image'>
</div></a></div>

---

如果没有jQuery或JS，这可能吗？

是的，这是可能的，但必须使用正确的选择器

.line :hover .image

.line

和

：hover

之间的空格在这里意味着

.line

的子元素被悬停–因此请删除空格，使其在

.line

自身悬停时作出反应

.line .image:hover image

这里没有本身是

.image

的后代的

.image

元素，因此此选择器也不适用。将其设置为

.line.image:将鼠标悬停

啊：）就是这样！非常感谢。

.line .image:hover image