JavaScriptを使わずにCSSだけでaタグ内の画像をマウスオーバー時に半透明にする方法をご紹介します。
Contents
半透明にするために使用した画像
マウスオーバー(hover)時のCSS記述
※これだけです。aタグhover時に50%に透過してます。
<style type="text/css"> <!-- a:hover img{ opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity = 50); } --> </style>
aタグ内の画像マウスオーバー時に半透明にするHTMLの記述
※コチラもこれだけです。必要に応じて変更して下さい。
<a href="/"><img src="i01.jpg" alt="マウスオーバー用の画像" width="160" height="160"></a>
CSSだけでマウスオーバー時にaタグの画像を半透明に表示するデモページ
CSSだけでマウスオーバー時にaタグの画像を半透明に表示デモ
手っ取り早くページ内のリンクボタン画像にマウスオーバーされてる感を出す際に使えそうな気がします。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告