CSS悬停效果不会在文本上触发

Question

这是我正在http://jsfiddle.net/bhbLa/上工作的项目的jsfiddle

我有一幅使用CSS设置为灰度的图片，在该图片上放置了一些文本。 将图像悬停在上方时，它将关闭灰度并隐藏文本。 exactly what I want. 这正是我想要的。

我遇到的问题是，如果您滚动到图像的不透明度为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;
}

最后，摆弄： 演示