アンカータグをマウスオーバーしたときに、要素を透過にして、半透明な感じにする方法
1 2 3 4 5 6 7 8 9 10 |
a:link { color: #55e; } a:visited { color: #55e; } a:hover, a:active { opacity: 0.5; filter: alpha(opacity=50); } |
1 |
opacity: 0.5 |
opacityは、0.5で透明度50%。
1を指定すると、100%で透過なしになります。0を指定すると完全に消えてしまいます。
1 |
filter: alpha(opacity=50); |
filter: はIE用。
opacity=50で、透明度50% JQueryを使って、やんわり透過するには、
1 2 3 4 5 6 7 |
$("a").hover( function() { $(this).fadeTo(200,0.5); }, function() { $(this).fadeTo(200,1); }); |
fadeTo を使うと簡単です。
マウスオーバーの時、fadeTo(200,0.5) で、0.2秒かけて透明度50%にします。
マウスが離れたら、fadeTo(200,1)で戻します。