マウスでさわったときリンクの文字や画像に動きをつける方法

リンクをクリックをしてもらいやすくするために、
ページに動きを出す手があります。

今回説明するのは、
マウスでカーソルをもっていったとき、「ウニョ」と動くようにする方法です。

この動き、ちょっと文字では表現しがたいですね。

ウニョでもペコッでも好きなように呼んでください＾＾；

で、やりかたは単純で、
リンクのＨＴＭＬタグ aタグに対して、スタイルを設定します。

スタイルシートのa:hover にちょっとつけ加えるだけです。

a:hover　は、リンクされているテキストなどに
マウスを持っていったとき（マウスオーバーといいます）のスタイルを決める部分です。

このブログの場合、以下のようになってます。

a:hover {
    color: #069;
    text-decoration: underline;
 padding-top:3px;
 padding-left:3px;
}

下の２項目が、新たにつけ加えたものです。

上と左に3pxずつ空白を開けることにしました。

通常時（a:link a:visited）については空白はつけていませんから、
結果、カーソルを重ねると動きが出るようになります。

3px　というのは適当につけた数字なので、好きなように決めてください。

ちなみに、発想の元はおずさんのブログです。

ペコペコ動いていいな～、楽しいな～と思ったからやりたくなりました　笑