这是我正在研究的项目的一个方面 http://jsfiddle.net/bhbLa/
我有一张使用CSS设置为灰度的图片,其中一些文字位于图片上方。当图像悬停在上面时,它会关闭灰度并隐藏文本。它几乎正是我想要的。
我遇到的问题是,如果你滚动图像的正中心,不透明度为0;文本是,它不被视为悬停在图像上,将图像重新调整为灰度。
我为此整天绞尽脑汁,我不知道为什么
div.text:hover #cell {
opacity:1;
}
无法解决此问题。
答案 0 :(得分:2)
如果我理解正确,您需要将悬停效果定位到图像的父级而不是图像本身。
您的旧选择器正在执行的操作仅针对悬停效果,如果光标位于图像上方。好吧,当你将鼠标悬停在文本上时,这是一个块级元素,你实际上不再悬停在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