top画像（トマト）

リンクを触ったときに色を変えたい

javascriptでも出来ますが、cssでも出来ます。cssのが便利で軽い（容量が）です。
よくナビを触ると、色が変わったり色が変わったりしますよね。たとえば左側にあるナビゲーションとか。
リンクを去ったときに、何かしたいときは、a:hoverを使います。

サンプル

色が変わります

<a href="#">色が変わります</a>

a:hover {
color:#f4f;
}
a {
color:#333;
text-decoration:none;
}

たったのこれだけ！
a:hover　で触ったときのピンクを#f4fで設定。
a　の設定で何もしていないときの（デフォルトの）リンク色を#333;で設定。
text-decoration:noneで下線を消しました。
これをもっと応用してみます。

サンプル

色が変わります２

a {
color:#333;
text-decoration:none;
}
a:hover {
color:#f4f;
text-decoration:underline;
}

はい、リンクを触ったときにだけ下線を出るようにしました。 次は動かしてみましょう

サンプル

色が変わります３

a:hover {
color:#f4f;
position:relative;
top:3px;
left:3px;
}
a {
color:#333;
text-decoration:none;
}

ちょっと極端に動かしました。
次はhoverを使ってかっこいいナビを作ります。

  • TOP
  • ABOUT
  • BBS
  • LINK

画像

<div class="im clearfix">
<ul class="nav4">
<li>TOP</li>
<li class="btn">ABOUT</li>
<li class="btn">BBS</li>
<li class="btn">LINK</li>
</ul>
<p class="imagess">画像 </div>

.nav4 {
width:460px;
margin-left:20px;
}
.nav4 .btn {
position:relative;
top:20px;
}
.nav4 li {
width:100px;
padding-top:13px;
float:left;
margin-right:10px;
height:67px;
text-align:center;
background-image:url(../common/images/nav20.gif);
background-repeat:no-repeat;
}
.nav4 .btn:hover {
position:relative;
top:-0px;
background-image:url(../common/images/nav20.gif);
background-position:0px -80px;
}
.im {
position:relative;
top:0px;
left:0px;
}
.im .imagess {
background-color:#fcf;
width:480px;
height:40px;
position:relative;
top:60px;
text-align:center;
}

ちなみに、リンクにマウスを乗せたときと乗せてない時の画像を
一枚の画像にすると容量が軽くてすむしキャッシュが残っているから便利です。
それに、その画像を変えればナビの両方の画像も変わるしファイル数もその分少なくてすむし。