質問: テキストのリンク文字にカーソルを載せると横のアイコンが変わる qno.3262833で質問した物です。的確な回答をもらったのですが別の疑問が出てきたので、もう一度質問し直した方がいいと思い質問します。 前の質問でアイコンのgif画像を適当な形にくりぬいて透明にすることで、a:hoverで背景色を指定するだけでアイコンの色を変えれる事がわかりました。 この方法を使って、テキストのリンク文字にカーソルを乗せると、テキストの左にあるアイコンの色を変化させる、というのはできますか? 前の質問で教えてもらったリンク先のものはテキストの背景自体が変わるので、アイコンだけ変えようとするとアイコンにリンクをつけなければいけなくなり、テキストにリンクをつけることができません。テキストとアイコンにリンクをつけるとテキストの背景にも色が付いてしまいます。 何か方法はありますか?よろしくお願いします。
回答: 下記の補足回答です。 >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ファイルの記述========================== テキストリンクテスト テキストリンクテスト2 ================================================ もし、リスト形式でリンクテキストを並べるのであれば タグの使用をおすすめします。 ====htmlファイルの記述========================== テキストリンクテスト テキストリンクテスト2 ====cssファイルに追記=========================== ul.menu li{list-style:none;} ※自動的に「・」が先頭に表示されるので非表示の設定にします。 ================================================ a:link,a:visitedとa:hover,a:activeの設定は 色々なブラウザがありますので 念のため設定しておいたほうが良いかと思います。 あと、javascriptは使用しなくてokですよ。 解決すると良いのですが...!