CSSを使ったリンクhoverでの画像変更方法 パソコン関連

　嬉しいことに、拍手から「スタイルシートで、カーソル合わせたときに画像を変える方法教えて」とリクエストをいただいたので、書いてみます。いただいた元は友達だけどね、拍手には記事で返答だ！（なんとなく）

---

方法は簡単です。
　スタイルシートを使用し、通常リンクの色・カーソルが合っている状態の色、というのを指定して、文字色を変えたりアンダーラインをつけたり、という変更はよく使われていると思います。それに、背景画像を加えるだけ。
　ただそれだけだと、リンクしているものすべてに画像がついてしまう。そこで、画像を付けたいもの用のクラスを設定すればよいワケです。

　例を示します。

スタイルシート設定
/*通常リンク*/
a:link {
　color: #336600;
　text-decoration: none;
}
/*カーソルが合っている状態のリンク*/
a:hover {
　color: #CC8833;
　text-decoration: underline;
}
/*通常リンク（画像付）*/
a:link.with_image {
　color: #336600;
　text-decoration: none;
　padding-left: 13px;
　background-image: url("xxx1.gif");
　background-repeat: no-repeat;
　background-position: top left;
}
/*カーソルが合っている状態のリンク（画像付）*/
a:hover.with_image {
　color: #CC8833;
　text-decoration: underline;
　padding-left: 13px;
　background-image: url("xxx2.gif");
　background-repeat: no-repeat;
　background-position: top left;
}

HTML
<a href="url">ただのリンク</a>
<a class="with_image" href="url">画像変更されるリンク</a>


　これは、私が目次に使用しているコードの抜粋です。
　ただのリンクは、カーソルを合わせたときに　○色を変える　○アンダーラインをつける　という変更がされます。画像付CSSでは、それに加え　○背景画像を変える　を行っているだけですね。
　画像付CSSで、background指定の他にpadding指定もしていますが、これは文字が画像にかぶらないようにするためです。目次の画像は各行にヘッダのようについていますが、実はこれはpaddingによって文字の左に隙間を空けているだけであり、画像の続きに文字があるわけではないのです。ココがポイントかな。