CSS懸停效果上的文字

Question

不觸發這裏是我的工作 http://jsfiddle.net/bhbLa/

該項目的的jsfiddle我已經被設置使用一些CSS爲灰度，具有定位在圖像的一些文字的圖片。當圖像懸停時，它會關閉灰度並隱藏文本。它幾乎是正是我想要的。

我遇到的問題是，如果你滾動的圖像的中心不透明度：0;文本是，它不被視爲懸停在圖像上，這將圖像變回灰度。

我絞盡腦汁想了一整天了這一點，我不知道爲什麼

div.text:hover #cell { opacity:1; }

不能解決這個問題。

Answer 1

如果我的理解正確，您需要將圖像的父級上的懸停效果作爲目標，而不是圖像本身。

您的舊選擇器在做什麼只是針對懸停效果如果光標在圖像上。那麼當你將鼠標懸停在塊級元素的文本上時，你實際上已經不在鼠標懸停在img元素上，因此將失去其懸停效果。

這是我改變了CSS：

div.cell:hover img { 
    filter: none; 
    -webkit-filter: grayscale(0); 
    transition: opacity .2s ease-in-out; 
    -moz-transition: opacity .2s ease-in-out; 
    -webkit-transition: opacity .2s ease-in-out; 
    opacity:1.0; 
} 

最後，小提琴：Demo