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

質問

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についても少し詳しくなれまして、とても嬉しいです。
この度はありがとうございました。

回答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の部分は設定しないのだと思ったのですがそれでよかったでしょうか？

回答No.1

torayoshi

QNo.3262833で得られた回答は、あくまで画像にマウスが乗った時の背景色変化なので、
テキストリンクに対しての時とは事情が違ってきます。
テキストリンクの場合は、やはり画像を二枚用意する必要があるのではないでしょうか。
で、こんなことしてみるとか↓
<img src="マウスが乗る前の画像" width="*" height="*" alt="" name="img">
<a href="*.html" onmouseover="img.src='マウスが乗った時の画像'" onmouseout="img.src='マウスが乗る前の画像'">テキストリンク</a>

お礼

詳しい説明ありがとうございます。是非参考にさせて頂きます。
CSSのみでは無理なんですね。CSSのみで作る場合の利点に惹かれますがどちらが必要かよく考えてみようと思います。