サイトの中でマウスオーバーの時に「格好悪いので画像リンクの下線を消したい」が「テキストリンクは下線は出したい」というケースがあると思う。
画像に下線が出ると格好悪いが、テキストだと下線が出ないとリンクだと一般的にわかりにくい。
全部のリンクのマウスオーバー時の下線を消す
a:hover {
text-decoration: none;
}
疑似クラス（:hover）をリンクであるa要素すべてにかける方法。しかしこれだと、テキストの下線も巻き添えをくらって出て来なくなる。
手っ取り早く、確実に画像にだけ適用する方法
HTMLやCSSというのは、何かを表現するのに、良くも悪くも何通りもの方法があるのは大前提。
自分一人で白紙の状態から作ったサイトならともかく、CMSだったり、人が作ったサイトを編集したり、あるいは自分が作ったけど昔過ぎて忘れてしまったような場合もあるだろう。
てっとり早く画像の下線だけ消したい場合は、
HTML側で
div class=”sen_denai”
などと新しいクラスで画像を囲む。
そして、cssで
.sen_denai a:hover{
text-decoration: none !important;
border: none !important;
}
と書く。色々な記述を書かないとならないのは、他の部分などの設計によってケースバスケースで、効いたり効かなかったりするから。
なぜかマウスオーバーすると画像がずれてしまう場合は、
vertical-align:top;
などを記述すると良い場合がある。
「画像リンクのマウスオーバーの下線を消す、但し、文字は下線を出す」
日本語だとこれだけなのに、場合によってはかなりの時間を試行錯誤しないとならない場合もあるだろう。検討を祈る。
