カーソルを合わせると、文字が沈んで見えるようにする

灰色背景がサンプルソース

サンプルソース

HTMLソース

<a href="http://www.yahoo.co.jp">Yahoo!JAPAN</a>

CSSソース

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

サンプル表示

→カーソルを合わせると、文字が沈んで見えるようにする(サンプル)

解説

HTMLソース

特にHTMLの方に記述することはありません。普通にリンクを張る時と同じように書けばOKです。

CSSソース

a:hover {position:relative; top:1px; left:1px;}を指定します。
これは、リンク(a)の上にマウスカーソルが乗った時(hover)に、aタグで囲まれた文字(リンク文字)を右に1px・下に1px移動させるという指定です。

position:relative;は現在の位置からtopとleftで指定した分だけ移動させるという意味。
top:1px;は下に1px、left:1px;は右に1px移動するという意味です。