JavaScript版があるのでCSS版も書いておく。
この手法はマウスオーバー画像用意しなくていいから重宝する。
CSS3対応しているブラウザであれば、transitionプロパティでJavaScript版と同じようなフェーディング効果をつけることができる。
っていうサンプルだけじゃあれなので、クリック効果とアウトライン消しをつけてみた。
a { outline:none; } a img{ position:relative; -webkit-transition:opacity 0.5s; /*Safari,Chrome*/ -o-transition :opacity 0.5s; /*Opera*/ -moz-transition :opacity 0.5s; /*Firefox*/ transition :opacity 0.5s; /*CSS3 Real Property*/ } a:focus img, a:hover img { filter:alpha(opacity=50); /*IE*/ -moz-opacity:0.5; /*Older Firefox*/ opacity:0.5; /* Modern Browsers*/ } /* 押したとき */ a:active img { top:1px; left:1px; }
今の所transitionに対応してるのはWebkitだけなので、他はおまじないみたいなもんです。
なおCSS Tricksによると、-mozとか-webkitとかのブラウザ依存のプロパティよりも後に
CSS3の本来のプロパティを書いた方がいいらしい。
aをブロックかインラインブロックにして背景をつけておくと、マウスオーバーでちょっと色を変えたり出来る。
a { display:inline-block; background-color: #000; }
ちょっとひねったりもできる。
a:focus img, a:hover img { -moz-transform: skewY(-5deg); -webkit-transform: skewY(-5deg); transform: skewY(-5deg); }