- ベストアンサー
マウスオーバーで下線を表示させる（リンク）
<a href="リンク先" target="_blank" style="text-decoration: none;"> <font size="-1" color="405050" onMouseOver="this.style.color='#dc143c'" onMouseOut="this.style.color = '#405050'"> 文字列</a></font> というタグで、マウスオーバーで文字色が変わるように しています。 下線を常時表示させてもいいのですが、 表示させると文字が読みにくくなってしまうので、 マウスオーバー時のみ下線を表示させ、 文字色も変えるタグはないでしょうか？ 出来れば上記のようにタグに直接挿入する ものが希望です。よろしくお願いいたします。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
もし、それぞれのカテゴリごとにリンクも色分けしたいという事だけが理由なのでしたら、 cssでも実現可能なので1の方の補足をしますね。 ---------------------------------------- <style type="text/css"> <!-- a{ text-decoration: none; } a:hover{ text-decoration: underline; } a.game{ color: #405050; } a:hover.game{ color: #dc143c; } a.anime{ color: #0000ff; } a:hover.anime{ color: #00ffff; } } --> </style> <a href="リンク先" target="_blank" class="game"><font size="-1">ゲーム</font></a><br> <a href="リンク先" target="_blank" class="anime"><font size="-1">アニメ</font></a> ---------------------------------------- というように「.moji」で、タグの要素に「class="moji"」があるものにのみ指定したcssを有効に出来ますので、これによってカテゴリごとに色をわけられては如何でしょうか？ css使わない方法も思い浮かびますが、支障がないのでしたら、この方法を使うことをお勧めします。
その他の回答 (3)
- 0425257151
- ベストアンサー率41% (13/31)
ごめんなさい <a href class=type1>リンク1</a> <a href class=type2>リンク2</a> でいけそうです
お礼
ありがとうございます。 なるほど、こんな方法がありましたか。 勉強不足でした(^^;) 参考になりました。ありがとうございます。
- 0425257151
- ベストアンサー率41% (13/31)
<style type="text/css"> <!-- .type1 a:link{ color:普通時の文字色; } .type1 a:visited{ color:リンク後の文字色; } .type1 a:active{ color:クリック中の文字色; } .type1 a:hover{ color:触れた時の文字の色; border-bottom:1px solid 触れた時の下線の色; } .type2 a:link{ color:普通時の文字色; } .type2 a:visited{ color:リンク後の文字色; } .type2 a:active{ color:クリック中の文字色; } .type2 a:hover{ color:触れた時の文字の色; border-bottom:1px solid 触れた時の下線の色; } --> </style> として <span class=type1><a href>リンク1</a></span> <span class=type2><a href>リンク2</a></span> とすればいいと思います
- yukaself
- ベストアンサー率45% (22/48)
初めまして。 どうしても直接にタグを入れなきゃ駄目でしょうか？ CSSを使うととても楽ちんなのですが・・・＾＾； 検索して色々と探してみましたが、見つからなかったので直接入力に関しては他の人に託してみます(笑) もしCSSに挑戦されるのであれば、 とても簡単なので参考になさってください。 リンク一括指定です。 <HEAD>～</HEAD> の間に <style type="text/css"> <!-- a:link{ color:普通時の文字色; } a:visited{ color:リンク後の文字色; } a:active{ color:クリック中の文字色; } a:hover{ color:触れた時の文字の色; border-bottom:1px solid 触れた時の下線の色; } --> </style> ご要望の回答でなくて申し訳ありません
補足
早速のご回答ありがとうございます。 自分でもまだ方法がないか探してみてはいるのですが、 最終的に方法がなければcssしかないかなと思っております。 ただ、この方法だとリンクを貼った全部の文字列が 全て同じ色になってしまいますよね？ この「色」の部分がけっこう重要なところなんです。 カテゴリー別に色分けされているので、 リンク部分も色分けできればなぁと思っているのです。 せっかくご回答いただいたのに、申し訳ない(^^;)
お礼
ありがとうございます。 そうなんです、カテゴリーの色分けをリンクの文字列に反映したいだけなんです。 わかりやすく説明していただいて、とてもよく解りました。 この方法でやってみたいと思います。 ありがとうございました。