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

質問

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

回答No.3

picto3 · ベストアンサー

下記の補足回答です。

>class属性に設定した場合のCSSの記述方法を詳しく教えていただけませんか？
divタグでくくるのが一番簡単かと思います。

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

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

====HTMLファイルの記述==========================
<div class="menu">
　<a href="test.html">テキストリンクテスト</a>
　<a href="test2.html">テキストリンクテスト2</a>
</div>
================================================

もし、リスト形式でリンクテキストを並べるのであれば
<ul><li>タグの使用をおすすめします。

====HTMLファイルの記述==========================
<ul class="menu">
　<li><a href="test.html">テキストリンクテスト</a></li>
　<li><a href="test2.html">テキストリンクテスト2</a></li>
</ul>
====CSSファイルに追記===========================
ul.menu li{list-style:none;}
※自動的に「・」が先頭に表示されるので非表示の設定にします。
================================================

a:link,a:visitedとa:hover,a:activeの設定は
色々なブラウザがありますので
念のため設定しておいたほうが良いかと思います。
あと、javascriptは使用しなくてＯＫですよ。

解決すると良いのですが…！

お礼

お礼遅くなりすみません。
詳しく教えて頂きありがとうございます。
参考にしてやってみたら思い通りのものができました。CSSについても少し詳しくなれまして、とても嬉しいです。
この度はありがとうございました。