Question

这是我正在研究的项目的一个方面 http://jsfiddle.net/bhbLa/

我有一张使用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

CSS悬停效果不会触发文本

1 个答案: