リンク画像のマウスオーバー時の下線を消したい。（a:hover 関連。

質問

テキストリンクについては、マウスオーバー時に下線が表示されても良いのですが、画像リンクについては下線を表示させたくないと考えています。
どうやったら、切り分けられますでしょうか。

現在、cssファイル内にて、
----------------
a:hover {
color: #色;
border-bottom: 1px solid #色;
}
-----------------
と書いてあり、これがテキストリンクにも画像リンクにも影響しています。
-------------------
【CSS】
img{
border:0;
}
--------------------
ではダメでした。

-------------------------
【HTML】
<a href="リンク先" class="img"><img src="画像URL"></a>

【CSS】
.img a:hover {
border-bottom:0px;
}
-------------------------
→これでもダメでした。

どなたかご助言よろしくお願いします。

回答No.8

abril · ベストアンサー

もう問題は解決されている様ですが、少々気になる事があったので横から失礼します。

ANo.7様の、

a:hover.img {
border: none;
}　…(A)

という解決策に対する補足で、

> 通常、こういった場合は、スペースを空けて書きそうなものですが、
> 空けて書いてしまうとスタイルが効かないんですね。
> （これは例外的なケースなのかな～。）

とおっしゃっていますが、ちょっとセレクタの解釈を勘違いされている様に思われます。
a:hover.img {　}、a.img:hover {　}、はいずれもaタグ（マウスオーバー状態）に適用する"img"というクラス・セレクタです。
以前は後者の書き方のみ正しいとされていたと思うのですが、最近は実はどちらでもOKという記述が見られる様です。よって、この2つの結果は同じになります。
この設定は、HTML側が質問者様が現在意図されている下記の様な記述の、マウスオーバー時に適用されます。

<a href="リンク先" class="img"><img src="画像URL"></a>

しかし、ANo.1様が最初に書かれた、

a:hover .img {
border: none;
}　…(B)

というセレクタの意味は、aタグ（マウスオーバー状態）の「子要素」に適用する"img"というクラス・セレクタ、という事になります。従って、このスタイルが適用されるHTML側の記述というのは、

<a href="リンク先"><img src="画像URL" class="img"></a>　とか、
<a href="リンク先"><span class="img">テキスト</span></a>　とかいった場合の事になりますので、スタイルの適用される先の構造自体が異なります。

つまり、「通常、こういった場合は、スペースを空けて書きそう」とか「例外的なケース」という事ではありません。(A)(Ｂ)のセレクタの書き方は、それぞれ異なる文書構造に対応する、全く意味の違うものです。

それから、ANo.4の補足欄で自己解決されたと仰っている方法（vertical-align: bottom;）ですが、実際にサンプル（XML宣言有りのXHTML1.1の文書で）で検証してみましたが、IE６／7でがいずれもマウスオーバー時に画像の下線が表示されてしまいます。質問者様の環境ではその様にならないのでしょうか？

蛇足ですが、

> 恐らく、ウェブデザイン界ではよく使われている手法なのでしょう。

…「よく」というわけでもないと思いますよ。この業界にもそれなりに長くおりますが、そういうスタイル（リンクの下線をわざわざborderで指定しなければ実現できない様な）の指定を要求された事はほとんどありません。ケースバイケースでしょう

お礼

ありがとうございました（＾＾）
また何かありましたら、教えて下さいね。

補足

回答NO8,NO9をありがとうございます。
NO9に対する返答もここでさせて頂きます。

まず、ちょっとまとめてみました。

方法1

----CSS-----------------------------------------
a:hover.img{border: none;} /* スペース無し */
------------------------------------------------

----HTML----------------------------------------
<a href="リンク先" class="img">

<img src="画像URL">

</a>
------------------------------------------------

→ aタグ（マウスオーバー状態）に"img"というクラス・セレクタを適用

次に…、

方法２

----CSS-----------------------------------------
a:hover .img{border: none;} /* スペース有り */
------------------------------------------------

----HTML---例１---------------------------------
<a href="リンク先">

<img src="画像URL" class="img">

</a>
------------------------------------------------

----HTML---例２---------------------------------
<a href="リンク先">

<span class="img">テキスト</span>

</a>
------------------------------------------------
→「子要素」に、"img"というクラス・セレクタを適用

→ただし、本件の場合、マウスオーバー時の画像のボーダーは消えない

それは、先だって指定してある、

a:hover {
color: #色;
border-bottom: 1px solid #色;
}

のスタイルが継承されているから、ということですね。

だから、消えなかったわけですね～。納得。

＞(A)(Ｂ)のセレクタの書き方は、それぞれ異なる文書構造に対応する、全く意味の違うものです。

大変よくわかりました！
まるで、参考書のようです。

＞IE６／7でがいずれもマウスオーバー時に画像の下線が表示されてしまいます。
質問者様の環境ではその様にならないのでしょうか？

早速、調べてみました。
検証ブラウザは、IE６（だと思われます）です。
結果は、確かに、（透明な）下線のようなものが現れます。
有色の下線が表示されることはないのですが、マウスオーバー時だけ下線幅分だけ表示が下へズレます。
ドラッグしてみると、透明状態の下線が可視できる状態になりますので、そういった方法でも確認することができます。

サファリ3.2.1でも、目立ちはしませんが、チラッと表示されますね。
オペラでも同様の結果となりました。

Firefoxはなぜか表示されないようです。

有色無色問わず、この下線はやはり邪魔なので、上記の方法１を選んで処理したいと思います。

とても分かりやすく、そして、的を射た回答をありがとうございました。
大変勉強になりました。
また質問することがありましたら、その時も、どうぞよろしくお願いします。

回答No.9

abril

ANo.8で一つ書き忘れました。

a:hover .img {
border: none;
}　…(B)

仮にこのセレクタに対応する様な、

<a href="リンク先"><img src="画像URL" class="img"></a>

というマークアップであっても、マウスオーバー時の画像のボーダーは消えません。(B)に先だって指定してある、

a:hover {
color: #色;
border-bottom: 1px solid #色;
}

のスタイルは継承されたままとなります。

何でそうなるのか…については理屈があっての事ですので、セレクタの文法の解説をよく読んで把握されておく事をお奨めします。

お礼

ありがとうございました（＾＾）
また何かありましたら、教えて下さいね。

補足

NO8の回答の所で返答しております。
こちらも大変参考になりました。

＞何でそうなるのか…については理屈があっての事ですので、セレクタの文法の解説をよく読んで把握されておく事をお奨めします。

わかりました！しっかり、勉強していこうと思います。

本当に助かりました～。感謝感謝です。

回答No.7

aboutworks

ちょっと回答に補足。

a:hover.img{
border : none ;
}

でも、OKなはずです、たぶん。

順番というより、途中のスペースの問題です。

あと、関係ないですが、Class 名に、要素名と同じ名前を付けると CSS を見た時、混乱しやすいので、避けた方が賢明かも。まあ、今回は例題なので img とかいうclass 名なんでしょうけど。

お礼

ありがとうございました（＾＾）
また何かありましたら、教えて下さいね。

補足

補足回答ありがとうございます。

提示頂いた例でもOKでした。
順番というより、途中の半角スペースの問題だったのですね。
通常、こういった場合は、スペースを空けて書きそうなものですが、
空けて書いてしまうとスタイルが効かないんですね。
（これは例外的なケースなのかな～。）

また、クラス名に要素名と同じ名前は使わないようにします。
確かに分かりにくいですね。
色々とありがとうございます。
助かります。

回答No.6

aboutworks

<a href="リンク先" class="img"><img src="画像URL"></a>
というようにマーク付けしているなら、

単純に

a.img:hover{
border : none ;
}

で解決すると思いますが。

お礼

ありがとうございました（＾＾）
また何かありましたら、教えて下さいね。

補足

回答をありがとうございます。

実際に試してみました。
この方法でもイケマスネ。
素晴らしいです。
私のものより、これこそベストな回答だと思いました。

NO１の回答者の方は、

<a href="リンク先" class="img"><img src="画像URL"></a>
に適用するなら
a:hover .img{border:none;}

と説明されていましたが、
こちらではダメで、

a.img:hover{
border : none ;
}
こういった順序だとスタイルは上手く効くんですね。
順序を正確に理解していないとダメだということが分かりました。
これから勉強していきます。
回答を締め切らずに待っていて正解でした。
素晴らしい回答をありがとうございました。

回答No.5

dezimac

文字には下線ありで、画像には無しということですか。

そもそも下線を付ける方法を間違えています。
単純に文字に下線を付けるのは、border（境界線）ではありません。
text-decoration: underline;
です。
http://www.htmq.com/style/text-decoration.shtml

【CSS】
a {text-decoration: none;}/*リンクのアンダーライン無し*/
a:link {}/*未訪問*/
a:visited {}/*訪問済み*/
a:hover {text-decoration: underline;}/*マウス重なった*/
a:active {}/*クリックした時*/
a img{border:none;}

線の位置や太さ等を細かく調整したいというなら#3,#4の方のような方法になります。

参考URL：

http://www.htmq.com/style/text-decoration.shtml

お礼

ありがとうございました（＾＾）
また何かありましたら、教えて下さいね。

補足

さらに補足をありがとうございます。

>単純に文字に下線を付けるのは、border（境界線）ではありません。
text-decoration: underline;
です。

自サイトのリンク下線は、単純な下線ではないので、text-decoration　をあえて使っていません。

NO４の方の言葉を借りますと、
「これだと文字と下線の距離が近すぎるんですよね…という場合は、やっぱりボーダーになります。」
という問題もありますので、borderを使用しています。
テキストと下線の色を分ける時にも、borderである必要があると思います。実際に自サイトでも、色分けしています。

なお、私が今回解決策として見つけた方法は、
ある洗練されたサイトのCSSをくまなく調べて気付いたことです。
恐らく、ウェブデザイン界ではよく使われている手法なのでしょう。
ただの下線であれば、text-decorationによるスタイル指定をすれば良いでしょうね。

回答No.4

noname#180860

とりあえず、一番簡単なのは

a:hover{
color: #CC0000;
text-decoration:underline;
}

と記述することです。基本的には下線はボーダーじゃなくてテキストデコレーションです。
ただ、これだと文字と下線の距離が近すぎるんですよね…という場合は、やっぱりボーダーになります。

a{
text-decoration: none;
}

a:hover{
color: #CC0000;
border-bottom:#CC0000 solid 1px;
}

a:hover.img {
text-decoration:none;
border-bottom:none;
}
img {
border:0;
}

これでいけるとおもいます。
<a href="リンク先" class="img"><img src="../images/admin/btn3.jpg"></a>
の class="img"はそのまま残してください。適用されるはずです。

お礼

ありがとうございました（＾＾）
また何かありましたら、教えて下さいね。

補足

回答ありがとうございます。

ちょっと前に自分で解決しちゃいました。
でも、私のためにご助言下さりありがとうございます。
頂いた回答は時間のあるときに試させていただきます。

ちなみに私が見つけた解決策は、自分で言うのもなんですが、一発でした。

a:hover の設定はそのままに、

img{
border:0;
vertical-align: bottom;
}

を追加するだけです。
ポイントは、vertical-align: bottom; これです。

画像をボトム配置にすると、下線が消える（下線の存在領域が消失する、ということなのでしょうか。）ということを見つけました。

これは、ある意味、裏技的な話なのでしょうが、
結果的に解決できたので良かったです。

この手の質問はネット上に多いのですが、
どの回答もパッとしなかったため、今回質問をさせていただきましたが、
幸運にもキレイサッパリ解決することができ、とても嬉しいです。
みなさんのご協力のおかげです。
感謝しています。

回答No.3

noname#83877

できないこともないですが、borderではできません。

a:hover {
background:url(image.gif) repeat-x 0 100;
}
img {
vertical-align:bottom;
}
a img {
border:0;
}

高さ1px程度の背景画像をaタグにリピートで指定して、imgが入ると見えなくなるという感じです。
使用にはそれなりに制限が付きますが、場合によっては使えるかもしれません。

お礼

ありがとうございました（＾＾）
また何かありましたら、教えて下さいね。

補足

回答をありがとうございます。

画像を使う方法ということでしたが、好み的にはイマイチですね～。＾＾；
えっと、頂いた回答は、つまり、こういった方法でしか、目的を達成できないということを意味するのでしょうか？

回答１，２の方の方法では、無理ということなのでしょうか。
（私にはできませんでしたが、本来ならできることなのかな、とも思えているわけです。）

実際、皆さんはどうされているんでしょうね。

回答No.2

dezimac

【CSS】
a img{border:none;}
【HTML】
<a href="xx"><img src="xx"></a>

とやっていれば、リンク時の線が出る事はありえません。
CSSの他の部分を全て削除して、上記のだけで試して下さい。
スタイルシートの全体をとおしての記述に問題があるはずです。

あとはブラウザの設定が考えられるけど、他のページ見てもリンク画像に線が付かないのなら、ブラウザのせいではありません。

お礼

ありがとうございました（＾＾）
また何かありましたら、教えて下さいね。

補足

回答ありがとうございます。

a:hover {
color: #色;
border-bottom: 1px solid #色;
}

質問文にも書きましたが、この箇所を取り去ると、当然ながらマウスオーバー時の画像の下線は消えます。

この記述をテキストだけに適用する、という方向で考えていたのですが、
これがある限り、画像にも適用されてしまうようです。

a:hover
→テキスト、画像　どちらのリンクにも確実に作用するように思うわけです。（色々試した結果）

a img{border:none;}
↑これを使って、画像のみ、「上記スタイルを適用外にする」という指定はどうやらできなそうなのです。
（回答１の補足で試した結果、思うことです。）
※実際にはそんなことはないのでしょうか？

なので、考え方として、

a;hover img{border:none;}　　　　/* 画像のスタイル */
a:hover text{border:solid 1px;} /* テキストのスタイル */

というように、バラバラに指定するような方法（考え方として）を模索していますが、そんなものはありませんでしょうか。

それとも、やはり、どこかで何かを間違えているのでしょうかね。。。

回答No.1

dezimac

.img a:hover {
border-bottom:0px;
}

CSSの書き方をしっかり理解されていないようですね。
これだと、クラス名「img」以下のa:hoverに対して作用します。

<a href="リンク先" class="img"><img src="画像URL"></a>
に適用するなら
a:hover .img{border:none;}

<a href="xx"><img src="xx"></a>

ともかく、画像にリンク時の線を付けたくないのなら、
a img{border:none;}
とするのが最も手軽です。
マウスオーバー時だけなら
a:hover img{border:none;}

お礼

ありがとうございました（＾＾）
また何かありましたら、教えて下さいね。

補足

回答ありがとうございます。

早速アドバイスに従ってトライしてみました。
結果は以下の通りです。

a:hover .img{border:none;}　→効果なし
a img{border:none;}　→効果なし
a:hover img{border:none;}　→効果なし

すべてダメでした。

IEだと、画像の最下部に下線が、
FireFoxだと、画像の下に３ｐｘくらいの隙間をあけて下線が、
それぞれ表示されます。