这是我正在从事的元素的jsfiddle http://jsfiddle.net/bhbLa/
我有一张使用一些 CSS 设置为灰度的图片，并在图像上放置了一些文本。当图像悬停在上面时，它会关闭灰度并隐藏文本。这几乎正是我想要的。
我遇到的问题是，如果您滚动到图像的正中心，其中 opacity:0;文本是，它不被视为悬停在图像上，这会将图像恢复为灰度。
我为此绞尽脑汁，也不知道为什么
div.text:悬停#cell {
不透明度:1；
}
无法解决此问题。
最佳答案
如果我理解正确，您需要将悬停效果定位在图像的父级而不是图像本身。
您的旧选择器所做的只是针对光标位于图像上方的悬停效果。那么，当您将鼠标悬停在文本( block 级元素)上时，您实际上不再将鼠标悬停在 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;
}
最后，一个 fiddle :Demo
关于html - CSS 悬停效果不会在文本上触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21712278/