css - 悬停在 div 上时显示灰色图像，悬停在灰色图像上时显示彩色图像

Question

我想做这样的事情：
在 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>

CSS

.image                  { visibility:hidden; height:48px;width:48px;background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSZP-OED3SNXR6bzDbYbAxQUUBIobAu60g1Ft9Wapv_ysUd37ANcw);}
.line :hover .image       {visibility:visible;}     
.line .image:hover image        {background-image:     url(http://t2.gstatic.com/images?q=tbn:ANd9GcStjRtP8jtJNFLgnzWT-plN-JGLLb0L4ZSD4wqKksAs517dvj_rSA);}

http://jsfiddle.net/UT56U/1/

没有jQuery或JS有可能吗？

Answer 1

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

.line :hover .image

.line和这里之间的空间:hover意味着被悬停的后代元素.line- 所以删除空间，让它对.line自身的悬停做出反应。

.line .image:hover image

这里没有.image元素本身就是 an 的后代.image，所以这个选择器也不适用。.line .image:hover改为这样做。

http://jsfiddle.net/UT56U/2/