これは「私が取り組んでいるプロジェクトのjsfiddleです http://jsfiddle.net/bhbLa/
CSSを使用してグレースケールに設定された画像があり、画像の上にテキストが配置されています。画像にカーソルを合わせると、グレースケールがオフになり、テキストが非表示になります。それは ほぼ まさに私が欲しいもの。
私が抱えている問題は、opacity：0の画像の真ん中をスクロールすると、テキストが画像上に浮かんでいるとは見なされず、画像がグレースケールに戻ることです。
私はこれのために一日中頭を悩ませてきたが、その理由はわからない
div.text:hover #cell {
opacity:1;
}
この問題は修正されません。
回答：
回答№1は2私が正しく理解している場合、画像自体ではなく、画像の親に対するホバー効果をターゲットにする必要があります。
古いセレクターが行っていたのは、ホバー効果のみをターゲットにすることでした if カーソルは画像の上にあります。 ブロックレベルの要素であるテキストの上にマウスを移動すると、実際には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;
}
最後に、フィドル： デモ