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タグをブロック要素に変更する方が楽そうですが、使用する場面によって使い分けが必要かなと思います。

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年11月
 12
3456789
10111213141516
17181920212223
24252627282930