リンクの部分にマウスオーバーしたときに、文字の背景色を変えます。
リンク部分の設定には、
 |
a:link |
： 未表示のリンク |
|
a:visited |
： 表示したリンク |
|
a:active |
： 選択されてアクティブなリンク |
|
a:hover |
： マウスが上にあるリンク |
の4種類があるので、それぞれのときの背景色を指定することができます。
とりあえず、このページのタイトルが「マウスオーバーで…」となっているので、「a:hover」に設定してみます。
マウスがリンク部分に乗ったとき(＝マウスオーバーのとき)は、スタイルシート中の「a:hover」で指定します。
背景色の指定は、background-colorプロパティで指定します。
→
background-colorの詳しい説明
 |
 |
 |
 |
<STYLE type="text/css">
<!--
A {COLOR: #3e4755; TEXT-DECORATION: none; BORDER-BOTTOM: #91a4e3 1px dotted;}
A:visited {COLOR: #3e4755; TEXT-DECORATION: none; BORDER-BOTTOM: #e87c89
1px dotted;}
A:hover {COLOR: #91a4e3; TEXT-DECORATION: none; BORDER-BOTTOM: #91a4e3
1px dotted;}
a:hover.link01 {background-color:red;}
a:hover.link02 {background-color:#99cc66;}
a:link.link11 {background-color:#ffffff;}
a:visited.link11 {background-color:#dddddd;}
a:active.link11 {background-color:#ffff99;}
a:hover.link11 {background-color:#98cbf8;}
-->
</STYLE>
<A href="#" class="link01">リンク部分です (背景色：red)</A><BR>
<A href="#" class="link02">リンク部分です (背景色：#99cc66)</A><BR>
<BR>
※ リンク部分の設定には4種類ありますが、それぞれに設定してみました。<BR>
未表示のリンク：#ffffff 表示したリンク：#dddddd <BR>
選択されてアクティブなリンク：#ffff99 マウスが上にあるリンク：#98cbf8<BR>
<A href="#" class="link11">リンク部分です</A>
|
 |
 |
 |
 |
