10月 132011
灰色背景がサンプルソース薄緑背景が実際の見た目
サンプルソース
HTMLソース
<a href=”http://www.yahoo.co.jp”>Yahoo!JAPAN</a>
CSSソース
a:hover {
position:relative;
top:1px; left:1px;
}
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移動するという意味です。