ホームページ作成 - マウスが来た時に文字を移動するロールオーバー

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

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

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

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

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

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

sample

マウスを合わせると、上から1px・左から2px移動。

ＨＴＭＬ　

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

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

スタイルシート　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>

こうなります

↓　ＯＰＥＲＡでは、下線が消える場合があります。↓