ホームページ作成(リンク)
無料!発信中!メール情報誌!

ホームページ作成しよう!
HTML〜スタイルシート

ホームページ作成TOP > リンク > マウスが来た時に文字を移動する

マウスが来た時に文字を移動する

マウスがリンクの文字に重なった時、ボタンを押したように文字が下がる方法です。

ボタンは通常の表示でも、押した時に凹んだ感じに見えるようになっています。
これを、通常の文字のリンクでも行う方法です。

また、マウスが来た時の様々なパターンをTOP > マウスで変化で説明してますので確認して下さい。

(↓マウスが重なった時に文字色も変化するにはマウスが来た時に文字色を変更するを参照。↓)

sample
HTML 

スタイルシートにて実現できます。

ホームページ作成TOP > リンク > マウスが来た時に文字を移動する > このページのTOP ▲

スタイルシート a:hover { position:relative;}

リンクにマウスが重なった時に文字を移動するには、マウスが重なった時に表示位置を移動する事で可能になります。

マウスが重なった時は、:hover 擬似要素(カーソルが重なった場合) をリンクに対して設定をします。

そして、この重なった時の動作を、要素の配置場所を指定するrelativeを使用して配置場所を再指定する(これにて見た目には移動した様に見える)事で可能になります。。

このposition:relative;は、下記にありますように、通常の位置から相対的に移動する事が設定可能です。

設定位置
position:static;通常のままの表示場所
position:relative;通常の位置から相対的に移動
position:absolute;絶対的な位置に移動
position:fixed;絶対的な位置に移動し位置を固定

移動する場所の設定は、下記の様にそれぞれ移動したい方向に対して設定していきます。

設定位置
top:サイズ;上からの位置
bottom:サイズ;下からの位置
left:サイズ;左からの位置
right:サイズ;右からの位置

この擬似要素は、headに書いてください。

headに書く
書き方は

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">

 <style type="text/css">
 <!--

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

 -->
 </style>
 </head>
 <body>

<a href="リンク先">マウスを合わせると、上から1px・左から2px移動。</a>

 </body>
</html>
こうなります
↓ OPERAでは、下線が消える場合があります。↓
IE7
IE
Firefox
Opera

ホームページ作成TOP > リンク > マウスが来た時に文字を移動する > このページのTOP ▲