スタイルシートを使ったリンクタグの質問です。

質問

スタイルシートでリンク下線を消して、カーソルが乗った時に下線を出すように指定していますが、
画像にリンクを貼った場合も、カーソルが乗った時に下線がでてしまいます。
画像リンクの場合は下線を出さないように指定はできますでしょうか？

回答No.4

abril · ベストアンサー

goldfox様
> 「下線」は画像にはつきません。

ご指摘どおり、「下線」「下枠線」という言葉の使い分けが明確でなかったのは訂正します。
ただ、ANo.1の回答者様がサンプルとして書かれたHTMLコードが
<a href="#">test<img src="～">test</a>
という、<a>タグの中にテキストと画像が混在しているものでしたので、その様なケースを差しているのかとてっきり思ってしまいました。この場合であれば、<img>タグの下にも「線」は表示されてしまいますので…。
確かに<img>タグがborder:0;に初期化されていて<a>タグの中に<img>タグしか含まれていないのであれば、いかなる線も画像の下にはつきません。ですので私が書いた方のサンプル：
<p><a class="hogehoge" href="#"><img src="images/hogehoge1.jpg" alt="hogehoge1" width="100" height="25"></a></p>
の状態であれば<a～>だろうと<a class="hogehoge"～>だろうと差はないです。その点は紛らわしかった事をお詫び致します。

ただ、質問者様の：

>スタイルシートでリンク下線を消して、カーソルが乗った時に下線を出すように指定していますが、画像にリンクを貼った場合も、カーソルが乗った時に下線がでてしまいます。

という文章から察すると、「スタイルシートでリンク下線を消して」というのは"a { text-decoration: none; }"とされていると思われますし、であれば"a:hover"に対しても"{ text-decoration: underline; }"で「カーソルが乗った時に下線が」出る状態を設定されているとするのが自然であり、わざわざborder-bottomで設定しているとは考えにくいと思うのですが…？

まあこればかりは想像であれこれ解釈の違いを論じてもしょうがないので、質問者様からの情報提供を待つしかありません。

お礼

回答をありがとうございます。
abril様仰せの通り、
{text-decoration:none;}で
「a:link」「a:visited」「a:visited」「a:active」を指定しています。
a:hover {text-decoration:underline;}
で、カーソルが乗った時にリンク下線が出る設定にしております。
質問内容に詳細情報を筆記しないで申し訳ございませんでした。

abril様の回答では、画像リンクの際にはclass指定のスタイルシートで指定をすれば良いという事になりますよね？
画像リンクの際に個々に指定をしないといけないのは、多少面倒な気もしますが（ズボラですみません 汗）
ブラウザに左右されずに、画像リンクに下線がでないので、
この方法で指定をする事に致します！
本当にありがとうございました m(_"_)m

回答No.5

goldfox

> この場合であれば、<img>タグの下にも「線」は表示されてしまいますので…。

ああ、分かりました。
検証環境が違ったんですね。
私は「winXP、IE6、標準モード」でやって下線がでなかったので……。
Firefoxで確認したら、下線出ますね。すみませんでした。

お礼

回答をありがとうございました。
実は私もwinXP、IE6の環境ですので、下線はでませんでした ^^;
他ブラウザだとこの方法だと下線がでるという事なんですね。
参考になりました。
ありがとうございます m(_"_)m

回答No.3

goldfox

No.2さんのほうが間違っていませんか。
「下線」は画像にはつきません。
「下枠線」なら余計についてしまいますが。
質問者さんは「下枠線」（border-bottom）をつけているのではないですか？
そこがはっきりすれば（なぜborderを使うのかなど）、対策は立てられるかもしれません。

回答No.2

abril

残念ながら、ANo.1のご回答者様の方法では、質問者様のご希望の「画像リンクの場合は下線を出さないように」とはなりません。リンク付きの画像を囲む（ディフォルトの）ボーダー表示が消せるだけです。<img>に対するborderプロパティと<a>に対するtext-decorationプロパティは別ものです。
質問者様のご希望は、おそらく原則（汎用）としてa:hoverの時はアンダーラインを表示するが、画像にリンクが張られている時のみ例外としてアンダーラインを表示させない様にしたい、ということだと思います。
であれば、CSSに更に適当なclassを追加：
--------------------------------------------------------------------------------
a.hogehoge:hover { text-decoration: none; }
--------------------------------------------------------------------------------
HTML側では画像リンクの場合のみそのクラスを適用：
--------------------------------------------------------------------------------
<p><a href="#">テキストテキスト</a></p>
<p><a class="hogehoge" href="#"><img src="images/hogehoge1.jpg" alt="hogehoge1" width="100" height="25"></a></p>
--------------------------------------------------------------------------------
上記の表示結果は、上はマウスオーバー時にアンダーライン表示、下はアンダーラインなし、となります。

回答No.1

yambejp

とりあえずborderを表示しなければよいでしょう

<style>
a:hover{text-decoration:underline;}
a{text-decoration:none;}
img{border:none;}
</style>
<a href="#">test<img src="">test</a>

お礼

素早い回答をありがとうございました。