Google Chromeでopacityが効かない

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;
}

解決方法のデモページ2
　

どちらかといえばaタグをブロック要素に変更する方が楽そうですが、使用する場面によって使い分けが必要かなと思います。