画像リンクをマウスオーバーした時に半透明にしたり、カラーフィルターをかけたようにする方法です。
*IE6以上で表示されます。
画像をマウスオーバーで30%透明にする
↓完成画像
html
<a href="#" class="glow"><img src="images/linkButton.jpg" alt="Link Button" width="310" height="60" /></a>
.glow:hover { filter:alpha(opacity=70); /* IE 6,7*/ -moz-opacity:0.7; /* IE 8,9 */ opacity:0.7; } /* IE8 */ html>/**/body .glow:hover { display /*\**/:inline-block\9; zoom /*\**/: 1\9; } /* 新旧Firefox */ .glow:hover, x:-moz-any-link { background: #fff;} .glow:hover, x:-moz-any-link, x:default { background: #fff;}
(40%透明にしたいなら60、0.6)
*基本、hover時にopacityの設定ですが、IE8のみinline-blockを入れないと挙動しなかったので、ハックで追加してあります。(画像リンクのみ)
(旧Firefoxでbackgroundを入れないとダメなので同じようにハックで追加しました)
*設定によってはIE8以下でうまく表示されない事があります。
下記2つのどちらかで解決できます。
・cssを「.glow:hover」→「.glow img:hover」に変更する。(4ヶ所)
・htmlのクラス「glow」をaではなく画像(img)に入れる。
画像以外(テキストなど)のリンク範囲をマウスオーバーで30%透明にする
↓完成画像(先ほどのデモ2つ目の方です)
html
<li class="text"><a href="#"><span class="glow">→ Text Link Button</span></a></li>
li.text span.glow { display:block; height:58px; line-height:58px; width:289px; padding-left:20px; font-size:200%; color:#ca291d; background:#eef3f5; border-bottom:1px solid #898f92; border-right:1px solid #898f92; padding-top:1px; }
カラーなどはご自由に設定ください。
*ポイントはhtmlの「span」にクラス(glow)をつけて、css「display:block;」でブロック要素にして幅と高さを入れる事です。(リンク範囲を設定する)
マウスオーバーで30%透明カラーフィルターをかけたようにする
↓完成画像
「.glow」の親要素に↓でOKです。
background: #fff7d7; (好きな色)
html
<li><a href="#" class="glow"><img src="images/linkButton.jpg" alt="Link Button" width="310" height="60" /></a></li>
li { background:#c7edff; /*hover時の背景カラー設定*/ }
.glow:hover { filter:alpha(opacity=70); -moz-opacity:0.7; opacity:0.7; } /* IE8 */ html>/**/body .glow:hover { display /*\**/:inline-block\9; zoom /*\**/: 1\9; } /* 新旧Firefox */ .glow:hover, x:-moz-any-link { background: #fff;} .glow:hover, x:-moz-any-link, x:default { background: #fff;}
*テキストなど画像以外の場合も同様で、親要素に背景色を設定するだけです。
(デモ参考)
注意点
*aにdisplay:blockを設定すると下記ブラウザがうまく表示されなくなります。
(chrome、firefoxは問題ございません)
・画像→IE8以下(inline-blockを入れているため)
・テキストなど要素リンク→IE10以下
*opacityは子要素も含めて透過させるので文字も透明になります。
文字は透過させず背景のみ透明にする場合はopacityではなく「rgba」で背景を設定する方法を使います。
(詳しくはこちらの記事で)
▼opacityを全ブラウザに対応させるcss
http://d.hatena.ne.jp/soratomo0714/20160214/
▼IE8以下でもrgbaを使って、マウスオーバー時に文字(子要素)はそのままで背景のみを透明にする
http://d.hatena.ne.jp/soratomo0714/20160219/