リンク・マウス・重なる・乗る・スタイルシート・ホームページ作成

マウスがリンクの上に乗ったらアンダーラインを表示する

プロパティtext-decoration:
値underline

スタイルシートでマウスがリンクの上に乗ったときにアンダーラインを表示するにはtext-decoration:プロパティを使います。

値にはunderlineを指定します。

ここまでは一緒ですが、セレクタを指定するときに

a:hover のように指定します。hoverは擬似プロパティというものです。

これで「リンクの上にマウスが来たとき」という指定になります。

ソース例

<html>
<head>
<title>ホームページ作成・サンプル３</title>
<style type="text/css">
a { text-decoration:none; }
a:hover { text-decoration:underline; }
</style>
</head>
<body>
<a href="../online.html">戻る</a>
<br><br>
<a href="../../../index.html">ホームページ作成・HTML</a>
<br><br>
マウスをリンクの上にもっていくとアンダーラインが表示されます。
</body>
</html>

表示例はこちら

＜＜　「特定のリンクだけアンダーラインを表示する」へ　　　　　「マウスがリンクの上に乗ったらリンクの色を変える」へ　＞＞

ホームページ作成とHTML＞＞スタイルシートの書き方講座＞＞マウスがリンクの上に乗ったらアンダーラインを表示する