テキストのリンク文字にカーソルを載せると横のアイコンが変わる

質問

QNo.3262833で質問した物です。的確な回答をもらったのですが別の疑問が出てきたので、もう一度質問し直した方がいいと思い質問します。
前の質問でアイコンのGIF画像を適当な形にくりぬいて透明にすることで、A:hoverで背景色を指定するだけでアイコンの色を変えれる事がわかりました。
この方法を使って、テキストのリンク文字にカーソルを乗せると、テキストの左にあるアイコンの色を変化させる、というのはできますか？
前の質問で教えてもらったリンク先のものはテキストの背景自体が変わるので、アイコンだけ変えようとするとアイコンにリンクをつけなければいけなくなり、テキストにリンクをつけることができません。テキストとアイコンにリンクをつけるとテキストの背景にも色が付いてしまいます。
何か方法はありますか？よろしくお願いします。

回答No.2

picto3

カーソルを乗せるとアイコンが変わるようにするには
やはりQNo.3262833とは別の考え方をしないといけないと思います。
また、CSSでの設定は可能です。

====CSSファイルの記述===========================
a:link,a:visited{
padding-left:20px;
background:url('image/off.gif') no-repeat 0% 50% #ffffff;}

a:hover,a:active{
padding-left:20px;
background:url('image/on.gif') no-repeat 0% 50% #ffffff;}

====HTMLファイルの記述==========================
<a href="test.html">テキストリンク</a>
================================================
padding-leftの数値はアイコンの幅に合わせて変更して下さい。
また、上記の設定だとリンクテキストが全部アイコン付きになってしまいます。そうしたくない場合はid属性を設定してあげると良いかと。
■例
□css
#menu a:link,#menu a:visited{プロパティ属性}
□html
<div id="menu">
　<a href="test.html">テキストリンク</a>
</div>

または

<a href="test.html" id="menu">テキストリンク</a>（cssはそのまま）
※何度も使う場合はid属性を使用せず、class属性にして下さい

分かりにくかったらすみません…！

お礼

回答ありがとうございます。
私が見たサイトのものとだいぶ近いです！大げさですが感動してしまいました。感謝します。
これだとjavascriptは不使用だということでいいでしょうか？

補足

すいません、お礼の補足です。
class属性に設定した場合のCSSの記述方法を詳しく教えていただけませんか？
カーソルを載せたときとOFFの状態の画像の設定方法がどうしてもわかりませんでした。

.menu {
background-color: #FFFFFF;
background-image: url(images/ico_on.gif);
padding-left: 5px;
background-repeat: no-repeat;}

これだとOFFの状態の画像が設定できません。
class属性の場合はa:link,a:visitedとa:hover,a:activeの部分は設定しないのだと思ったのですがそれでよかったでしょうか？