Google Chromeで、hover時にopacityが効かない現象に遭遇したのでメモ。
サンプルコード
HTML
<a href="#"> <div class="image"><img src="rabbit.jpg" width="100" height="73" alt="" /></div> <p>オーダーは亀ですか? Is the order a turtle?</p> </a>
CSS
a:hover { opacity: 0.6; }
Google Chromeでopacityが効かない時のデモページ
解決方法
aタグではなく、aタグ内の要素に対してopacityを指定することで解決しました。
CSS
a:hover .image, a:hover p { opacity: 0.6; }
他にも、aタグをブロック要素に変更でも現象は回避できました。
CSS
a { display: block; } a:hover { opacity: 0.6; }
どちらかといえばaタグをブロック要素に変更する方が楽そうですが、使用する場面によって使い分けが必要かなと思います。
コメントが承認されるまで時間がかかります。