ハイパーリンクで使われる疑似クラスについてはこちらの記事を参照してください。
CSSでリンクにマウスポインタが重なった際にリンクのスタイルを変更するコードを紹介します。
CSSのhover疑似クラスを利用します。
以下の書式を利用します。
A:hover{
(マウスポインタがハイパーリンクに重なった際のスタイル)
}
よく使われるCSSン歩プロパティには以下があります。
| CSSプロパティ | 意味 |
|---|---|
| color | 文字色を指定します。 |
| text-decoration | 下線、打消し線を表現します |
| weight | 文字の太さ(ボールド)を表現します |
| font-style | 斜体を表現します。詳細はこちらの記事を参照 |
以下のHTMLファイルとCSSファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="HyperLinkHover.css" />
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>hover疑似クラスのデモ</h1>
<a href="https://www.ipentec.com">リンクです。</a>
</body>
</html>
A {
color: #009814;
}
A:hover {
color: #be4f00;
text-decoration:underline;
font-weight:700;
}
下記コードが通常のリンクのスタイルの指定です。今回の例では、緑色でリンクを表示します。
A {
color: #009814;
}
下記のコードがリンクにマウスポインタが重なった際のスタイル設定です。
今回のコードでは、文字色をオレンジ色にし、下線を表示し、文字のウェイトをボールドに設定しています。
A:hover {
color: #be4f00;
text-decoration:underline;
font-weight:700;
}
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
マウスポインタをリンクに重ねると、リンクの色が変化し、文字のウェイトがボールドになり、下線が表示されます。
