THE HAM MEDIA BLOG

以前３種類のロールオーバーを紹介しましたが、
今回は透明度を使ったロールオーバーの紹介です。

CSSのopacityを使う

画像や文字に透明度をつけるためには、
CSSのopacityプロパティを利用します。

ただし、このプロパティはIEに対応していないので、
IE対策用にfilterも指定します。

●画像を透明度の変化でロールオーバー

・HTML

<a href="#"><img src="rollover.gif" class="css-hover" /></a>

・CSS

a img.css-hover{
opacity:0.4;
filter: alpha(opacity=40);
}
a:hover img.css-hover{
opacity:1.0;
filter: alpha(opacity=100);
}

・プレビュー

●文字を透明度の変化でロールオーバー

・HTML

<p class="css-hover"><a href="#">ロールオーバー</a></p>

・CSS

p.css-hover a{
display:block;
width:150px;
padding:0.5em;
opacity:0.6;
filter: alpha(opacity=60);
background:#909090;
text-align:center;
color:#000;
}
p.css-hover a:hover{
opacity:1.0;
filter: alpha(opacity=100);
}

・プレビュー

これだけで透明度のロールオーバーができるので、
簡単に設定したい時は使えると思われる。

jQueryを使うと滑らかにロールオーバーするので、
そのサンプルも載せておく。

jQueryを使って透明度をだす

●画像

・HTML

<a href="#"><img src="rollover.gif" class="jquery-hover" /></a>

・JqvaScript（jQueryを読み込んでいること）

$(document).ready(function(){
$("img.jquery-hover").fadeTo(0,0.4);
$("img.jquery-hover").hover(function(){
        $(this).fadeTo(500,1.0);
    },
    function(){
        $(this).fadeTo(500,0.4);
    });
});

・プレビュー

●文字

・HTML

<p class="jquery-hover"><a href="#">ロールオーバー</a></p>

・JqvaScript（jQueryを読み込んでいること）

$(document).ready(function(){
$("p.jquery-hover").fadeTo(0,0.4);
$("p.jquery-hover").hover(function(){
        $(this).fadeTo(500,1.0);
    },
    function(){
        $(this).fadeTo(500,0.4);
    });
});

・プレビュー

jQueryのfadeToで時間を変えれば、
早く変化させることも、遅くする事も可能なのなのです。
場面によって使い分けてみてください。