資料の一覧へ

リンクにカーソルを合わせた状態への指定

下線を表示

合わせたときに下線を表示

CSSとタグの記述例

<STYLE type="text/css">
<!--
a { text-decoration: none; }
a:hover { text-decoration: underline; }
-->
</STYLE>

 　←CSSの指定開始
　←CSSが無効である場合に、指示を読み込ませないようにするための指定−開始
　←全ての状態で下線を表示しない(下線指定解除)
　←カーソルを合わせたときだけ下線を表示
　←CSSが無効である場合に、指示を読み込ませないようにするための指定−閉じ
　←CSSの指定終了

<body>
<a>合わせたときに下線を表示</a>
</body>

カーソルを合わせたときだけ下線を表示する場合、必ずa { text-decoration: none; }を使い全てのリンクの状態について下線の表示を解除しておきます。
この指定の後に特定のリンク状態にのみ下線指定をすることで、指定したリンク以外の状態では下線が表示されなくなります。

戻る

背景に色を表示

合わせたときに背景色を表示

CSSとタグの記述例

<STYLE type="text/css">
<!--
a:hover { background-color: lightpink; }
-->
</STYLE>

 　←CSSの指定開始
　←CSSが無効である場合に、指示を読み込ませないようにするための指定−開始
　←カーソルを合わせたときだけ背景色を表示、ピンク
　←CSSが無効である場合に、指示を読み込ませないようにするための指定−閉じ
　←CSSの指定終了

<body>
<a>合わせたときに背景色を表示</a>
</body>

背景色の表示を指定しても、文字色は初期設定のままなので、色によってはリンクの文字が読めなくなる場合があります。
下線を表示させたくない場合は、<!--の行とa:hover{background-color:lightpink;}の行との間に a{text-decoration:none;}という1行を加えます。

戻る

文字を動かす

合わせたときに文字を動かす

CSSとタグの記述例

<STYLE type="text/css">
<!--
a:hover {
position: relative;
top: 2px;
left: 2px;
}
-->
</STYLE>

 　←CSSの指定開始
　←CSSが無効である場合に、指示を読み込ませないようにするための指定−開始
　←カーソルを合わせた時に指定内容が表示される
　←下に指定した大きさだけ、元の位置から文字を動かす
　←動きの方向。上から下へ2px(ピクセル)動かす
　←動きの方向。左から右へ2px(ピクセル)動かす
　←CSSが無効である場合に、指示を読み込ませないようにするための指定−閉じ

　←CSSの指定終了

<body>
<a>合わせたときに文字を動かす</a>
</body>

top:とleft:以外にright: 2px;（右から左へ動かす）、bottom: 2px;（下から上へ動かす）も指定できます。
下線を表示させたくない場合は、上記の「合わせたときに背景色を表示」と同様、<!--の行とa:hover{の行との間に a{text-decoration:none;}という1行を加えます。

戻る