1. jQueryのhoverで文字色をふんわり変える
コードはいつもこんな感じのものを使っている。$(function(){
$("a").hover(
function () {
$(this).stop().animate({color: "任意の色A"}, 500);
},
function() {
$(this).stop().animate({color: "任意の色B" }, 500);
}
);
});
jQueryのhoverは、対応ブラウザが多いのだが、ページ読込完了後の最初のマウスホバーではアニメーションが効かないようだ。この現象は、特に、CSSにもa:hoverを同時に指定している場合に起こる現象のようだ。対応策としては、CSSのa:hoverでの指定はしないことで、アニメーションが効かない現象は解消されるが、これだとjQueryが読込めない時にa:hoverが出来なくなる、という欠点がある。
2. CSS3のtransitionで文字色をふんわり変える
通常のリンク色とマウスホバー時の色指定はこんな感じ。a {color: 任意の色A;}
a:hover {color: 任意の色B;}
CSS3のtransitionの対応ブラウザは、IEがver10のみで、他のブラウザもベンダープレフィックスでの対応となっている。しかし1.と違い、ページ読込み完了時の最初のマウスホバーでも効く。
なぜなら、CSSのa:hoverはそのままで、aに
a {
color: #000;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
a:hover {color: Tomato;}
と赤字部分を追記すれば良いだけなので。また、transitionに対応していないブラウザでも、1.と違ってa:hoverが出来なくなるということはない。
今後は、古いIEに対応する必要がない場合はCSS3を使うの方が良いかな。
No comments:
Post a Comment