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

マウスがリンクの上に乗ったらリンクの色を個別に変える

プロパティcolor:
値色名など

スタイルシートでマウスがリンクの上に乗ったときにリンクの色を個別に変えるにはcolor:プロパティを使います。

値には色名などを指定します。

まずは個別に変えるために、個別に変えたい数だけクラスを作ります。

そしてそのクラスごとにa:hover.クラス名 { color:色; }のように色を指定します。

下の例を見ていただければ言っていることが分かると思います。

ソース例

<html>
<head>
<title>ホームページ作成・サンプル５</title>
<style type="text/css">
.type1 { color:blue; }
a:hover.type1 { color:yellow; }
.type2 { color:blue; }
a:hover.type2 { color:red; }
</style>
</head>
<body>
<a href="../oncolor2.html" class="type1">戻る</a>
<br><br>
<a href="../../../index.html" class="type2">ホームページ作成・HTML</a>
<br><br>
マウスをリンクの上にもっていくと色がyellowやredになります。
</body>
</html>

表示例はこちら

＜＜　「マウスがリンクの上に乗ったらリンクの色を変える」へ　　　　　「マウスがリンクの上に乗ったらリンクを下にずらす」へ　＞＞

ホームページ作成とHTML＞＞スタイルシートの書き方講座＞＞マウスがリンクの上に乗ったらリンクの色を個別に変える