マウスが上にある時のリンクを変える
上部
では、次にスタイルシートでマウスがリンクの上にあるときのリンクを変更する方法を説明するよ。
学
そういえば、リンクの上にマウスを持っていったときに、文字の色が変わったりするホームページが有りますね。
上部
そうだね。マウスが上にあるときのリンクのデザインを変えるには、「a:hover」を使うんだよ。
例えば、マウスが上に来たときのリンクの文字を赤色にしたい場合、スタイルシートに次のように書こう。
a:hover{color:#ff0000;}
学
なるほど！では、さっそく僕の自己紹介でもマウスが上にあるときのリンク文字を赤色に変えてみます。
h1{
text-align:center;
font-size:20px;
color:#0000ff;
}
h2{
font-size:15px;
color:#3366ff;
background-color:#FFFF99;
border:1px solid #FF9900;
padding:0.3em;
}
h3{
font-size:13px;
background-color:#CCFFFF;
padding:0.2em;
}
p{
font-size:12px;
line-height:1.5em;
}
ul{font-size:12px;}
table{font-size:12px;}
a:visited{color:#0000ff;}
a:hover{color:#ff0000;}
学
こんな感じになりましたー
学の自己紹介を新しいウィンドウで開く
おお！マウスがリンクの上にあるときはちゃんとリンクの文字が赤色になります！なんか楽しいですね！
