css マウスオーバー時の画像の半透明化
2012/04/22
画像に対して「opacity」を指定する。ブラウザごとに解釈が違うので各ブラウザ用の記述も用意する。
記述例
イメージリンクで、マウスオーバー時に不透明度50%にする
- <style type="text/css">
- a:hover img
- {
- filter:alpha(opacity=50);
- -moz-opacity:0.50;
- opacity:0.50;
- }
- </style>
- <a href="#"><img src="○○○○.gif"></a>
イメージリンクで、マウスオーバー時に不透明度0%にする(透明にする)
- <style type="text/css">
- a:hover img
- {
- filter:alpha(opacity=0);
- -moz-opacity:0.00;
- opacity:0.00;
- }
- </style>
- <a href="#"><img src="○○○○.gif"></a>
イメージにマウスオーバーしたとき不透明度65%にする
- <style type="text/css">
- img:hover
- {
- filter:alpha(opacity=65);
- -moz-opacity:0.65;
- opacity:0.65;
- }
- </style>
- <a href="#"><img src="○○○○.gif"></a>
イメージを不透明度65%にする（マウスオーバーとかは関係なし）
- <style type="text/css">
- img
- {
- filter:alpha(opacity=65);
- -moz-opacity:0.65;
- opacity:0.65;
- }
- </style>
- <a href="#"><img src="○○○○.gif"></a>
※「img:hover{}」ではなく「img{}」にする