QNo.3262833で質問した物です。的確な回答をもらったのですが別の疑問が出てきたので、もう一度質問し直した方がいいと思い質問します。
前の質問でアイコンのGIF画像を適当な形にくりぬいて透明にすることで、A:hoverで背景色を指定するだけでアイコンの色を変えれる事がわかりました。
この方法を使って、テキストのリンク文字にカーソルを乗せると、テキストの左にあるアイコンの色を変化させる、というのはできますか?
前の質問で教えてもらったリンク先のものはテキストの背景自体が変わるので、アイコンだけ変えようとするとアイコンにリンクをつけなければいけなくなり、テキストにリンクをつけることができません。テキストとアイコンにリンクをつけるとテキストの背景にも色が付いてしまいます。
何か方法はありますか?よろしくお願いします。
No.3ベストアンサー
- 回答日時:
下記の補足回答です。
>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は使用しなくてOKですよ。
解決すると良いのですが…!
お礼遅くなりすみません。
詳しく教えて頂きありがとうございます。
参考にしてやってみたら思い通りのものができました。CSSについても少し詳しくなれまして、とても嬉しいです。
この度はありがとうございました。
No.2
- 回答日時:
カーソルを乗せるとアイコンが変わるようにするには
やはり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属性にして下さい
分かりにくかったらすみません…!
この回答への補足
すいません、お礼の補足です。
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の部分は設定しないのだと思ったのですがそれでよかったでしょうか?
回答ありがとうございます。
私が見たサイトのものとだいぶ近いです!大げさですが感動してしまいました。感謝します。
これだとjavascriptは不使用だということでいいでしょうか?
No.1
- 回答日時:
QNo.3262833で得られた回答は、あくまで画像にマウスが乗った時の背景色変化なので、
テキストリンクに対しての時とは事情が違ってきます。
テキストリンクの場合は、やはり画像を二枚用意する必要があるのではないでしょうか。
で、こんなことしてみるとか↓
<img src="マウスが乗る前の画像" width="*" height="*" alt="" name="img">
<a href="*.html" onmouseover="img.src='マウスが乗った時の画像'" onmouseout="img.src='マウスが乗る前の画像'">テキストリンク</a>
詳しい説明ありがとうございます。是非参考にさせて頂きます。
CSSのみでは無理なんですね。CSSのみで作る場合の利点に惹かれますがどちらが必要かよく考えてみようと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
word
-
PowerPoint SmartArtの箇条書...
-
Illustrator CS5 営業の「営」...
-
davinci resolveを使っているの...
-
Pages 09 でテキストボックスで...
-
Chromebookでオフラインでテキ...
-
illustratorとExcelは連携出来...
-
エクセルのオートシェイプ内の...
-
capcutってアプリで質問です。 ...
-
メールが文字化けします
-
WinMergeでのファイル比較
-
シーケンサ(PLC)学習ソフトを購...
-
ACCESSのフィールド
-
授業で講師が自分テキストを貸...
-
Adobe photoshop CS2 テキスト...
-
イラレでダブルクリックで文字...
-
VBA:水平スクロールバーが要ら...
-
exe bat
-
flashのダイナミックテキストに...
-
PDF文書で斜めテキスト
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
word
-
Illustratorテキストエリアへ塗...
-
illustratorとExcelは連携出来...
-
PowerPoint SmartArtの箇条書...
-
イラレでダブルクリックで文字...
-
バイナリファイルの編集
-
davinci resolveを使っているの...
-
Excel VBAで改行を含む文字列を...
-
サクラエディタで二つのテキス...
-
Publisherをエクセルファイルに
-
PDF-XChange Viewer のタイプラ...
-
画像からテキストデータを正確...
-
exe bat
-
PDF→CSVへ変換
-
PDF文書で斜めテキスト
-
【PDF】Bullzip PDF Printer で...
-
Chromebookでオフラインでテキ...
-
Adobe photoshop CS2 テキスト...
-
フォトショップで複数テキスト...
-
PDFファイルで画像化された文書...
おすすめ情報