顯示懸停在DIV，彩色圖像懸停在灰度圖像

Question

我想要做這樣的事情灰度圖像：
在DIV 顯示文本，懸停顯示下一個灰度圖像的文本
和懸停在灰度圖像顯示顏色圖片。

這裏就是我做SOFAR：

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/

是否possibl沒有jQuery或JS？

Answer 1

是的，這是可能的，但你必須使用正確的選擇器。

.line :hover .image 

.line和:hover這裏之間的空間將意味着正在徘徊的.line一個後代元素 - 所以刪除空間，有它的.line本身懸停反應。

.line .image:hover image 

你在這裏沒有.image元素本身就是一個.image的後代，所以這個選擇並不適用。改爲使用.line .image:hover。

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