10月 132011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

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移動するという意味です。

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>