リンク部分にマウスカーソルを乗せると動くようにしてみた。

2018年09月23日 正午の月齢:13.8  月名:待宵月  潮汐:大潮 月齢:13.8[待宵月] 潮汐:大潮
3か月前に投稿 | WordPress | コメントはありません

この記事を読むのに必要な時間の目安: 2分ぐらい

えー、たまに画像の上にカーソルを乗せると、画像が白っぽくなるサイトがありますよね。あれ嫌いなんですよ。まるで目が悪くなったかのように画像がすごく見にくくなるので。

ただ、「この画像はハイパーリンク張ってますよ」というのを強調したいというのは理解できるので、当サイトもリンク部分にマウスオーバーしたらピコッと画像やテキストが動くようにCSSを修正しました。

a:link{
color: #009999;
}

a:visited{
color: #009999;
}

a:active{
color: #009999;
}

a:hover{
color: #FF0099;
position: relative;
top: 1px;
left: 1px;
}

現在のところ、1pxで設定しているので、マウスオーバーとともに下に1px・右に1px動きますが、マイナスの値にすると逆方向に動きます。値を大きくするほどビヨンと動くのですが、あまり大きく動くととても下品になるので、1~2pxくらいがいいかなー。

別にあってもなくても大して変わらない機能なのですが、ちょっとウェブサイトに動きをつけるだけでずいぶん華やかになりますね。

前の記事・次の記事

前の記事
次の記事

この記事のトラックバックURL

https://susu.cc/2018/09/mouseovermove.html/trackback

コメントはありません »

[RSS on this post] [TrackBack URI]

コメントをどうぞ