css マウスオーバー時の画像の半透明化

2012/04/22
画像に対して「opacity」を指定する。ブラウザごとに解釈が違うので各ブラウザ用の記述も用意する。

記述例

イメージリンクで、マウスオーバー時に不透明度50%にする

  1. <style type="text/css">
  2. a:hover img
  3. {
  4.   filter:alpha(opacity=50);
  5.   -moz-opacity:0.50;
  6.   opacity:0.50;
  7. }
  8. </style>
  9.  
  10. <a href="#"><img src="○○○○.gif"></a>

イメージリンクで、マウスオーバー時に不透明度0%にする(透明にする)

  1. <style type="text/css">
  2. a:hover img
  3. {
  4.   filter:alpha(opacity=0);
  5.   -moz-opacity:0.00;
  6.   opacity:0.00;
  7. }
  8. </style>
  9.  
  10. <a href="#"><img src="○○○○.gif"></a>

イメージにマウスオーバーしたとき不透明度65%にする

  1. <style type="text/css">
  2. img:hover
  3. {
  4.   filter:alpha(opacity=65);
  5.   -moz-opacity:0.65;
  6.   opacity:0.65;
  7. }
  8. </style>
  9.  
  10. <a href="#"><img src="○○○○.gif"></a>

イメージを不透明度65%にする(マウスオーバーとかは関係なし)

  1. <style type="text/css">
  2. img
  3. {
  4.   filter:alpha(opacity=65);
  5.   -moz-opacity:0.65;
  6.   opacity:0.65;
  7. }
  8. </style>
  9.  
  10. <a href="#"><img src="○○○○.gif"></a>

※「img:hover{}」ではなく「img{}」にする

新着(ニュース関連以外)

2017-11-09
PCでプッシュ通知ってのをしたい。
2017-11-06
PHPのバージョンを上げたらwikiが壊れたっぽい。
2017-08-03
formのinputでmaxlengthを使うとFirefoxでバグってた。他のブラウザでも気づかずにバグってたかもしれない。
2017-07-19
折れ線グラフをもう少しゆるやかに・・・というか何というか・・・調べていくと「移動平均」っていう言葉にたどり着いた
2017-07-10
FuelPHPの1.8をダウンロードして使っていたらセッションが使えないということに気付いた。