カテゴリー　パンくずリスト　マウスオーバーで下線をいれるには？

Question

よろしくお願い致します。

CSS入力で

a { text-decoration: none; }
a:hover { text-decoration: underline; }

を入力すると文字リンクに下線がマウスオーバーで表示されるようにはできましたが…


例えば以下のようにパンくずリストを装飾した場合に
下線をマウスオーバーで表示する方法を教えて下さい。

td.sdtext {
    font-family: メイリオ;
    font-size: 11px; /*テキストのサイズ*/
    background: #f4f4f4; /*全体の背景色*/
    padding: 4px;
    border-radius: 2px;
    border: 1px solid #eee; /*枠線*/
}
td.sdtext a {
    text-decoration: none;
    color: #444; /*テキストの色*/
    display: inline-block;
    margin: 0 16px;
}


ちょっと改良して試した時には、
常に下線表示はできましたがマウスオーバーができません。
よろしくご教授お願い致します。

Accepted Answer

ECマスターズの田中です。

CSSの規則には優先度があり、
指定する場所に加え、規則の詳しさによって
一番優先度の高い属性が使われます。

詳しい説明は、下記URLをご参照ください。
http://creator.aainc.co.jp/archives/4947

＞a:hover { text-decoration: underline; }　これだけですと、パンくずリストには下線が反映されません。
この規則だけを指定した場合についてご説明いたしますと、
いただいたスタイルシートにて、
「td.sdtext a」に対して「text-decoration: none;」が
指定されております。
「td.sdtext a」は「a:hover」よりも優先度が高いため、
マウスオーバーしても「td.sdtext a」の「text-decoration: none;」が使われて、
結果として下線が反映されないようになっております。

「td.sdtext a」の「text-decoration: none;」は
マウスオーバーしていない時の下線を消すための指定と思われますが、
別の箇所にて、「a:link, a:visited」に対して「text-decoration: none;」が
設定されており、
「td.sdtext a」の「text-decoration: none;」を消しても、
マウスオーバーしていない時は下線が消えますので、

現在の状態から
「td.sdtext a」の「text-decoration: none;」を消し、
「a:hover { text-decoration: underline; }」の規則を適用していただくと、
ご希望通りの動作となると思いますので、
お試しいただけますでしょうか。

Answer

ECマスターズの田中です。

いただいたスタイルシートに追記する形であれば、

td.sdtext a:hover { text-decoration: underline; }

という形になりますが、
私にてtokunosukeさんのショップの商品ページを確認したところ、
既に

a:hover { text-decoration: underline; }

という規則が設定されており、
パンくずリスト内のリンクも、マウスオーバーで下線が表示されることを
Google Chromeにて確認いたしました。

もし、現時点で下線がひかれない状態であれば、
確認に使われているブラウザとバージョン（Chrome、Firefox、InternetExplorer 9・10・11等）を
お知らせいただけますでしょうか。

Answer

田中さん

ありがとうございます。

すでに記入しておりましたのはパンくず装飾をせずに下線を試す意味で記入しておりました。

質問に入力したスタイルシートに返答いただいた
td.sdtext a:hover { text-decoration: underline; }
を追記したところ

パンくずリストに下線が表記されました。

ありがとうございます。


ですが…


その記述ですと、パンくずリストには下線が現れますが、その他のリンク文字には下線が表示されなくなりました。
ヘッダー等その他のスタイルシートとぶつかっているのか、質問に記述したスタイルシートだと特定の場所だけに下線表記なのでしょうか。

ご教授お願い致します。

Answer

ECマスターズの田中です。

＞その記述ですと、パンくずリストには下線が現れますが、その他のリンク文字には下線が表示されなくなりました。
というのは、
td.sdtext a:hover { text-decoration: underline; } を追記後、 
a:hover { text-decoration: underline; } を削除したら
その他のリンク文字には下線が表示されなったということで間違いないでしょうか。

＞質問に記述したスタイルシートだと特定の場所だけに下線表記なのでしょうか。
はい、「td.sdtext a:hover」という規則は、
パンくずリストの中にあるaタグにカーソルを当てた場合、に適用される規則なので、
他の場所に適用させたい場合は、その場所用の規則を別途作る必要があります。

ページ全体に適用させて特に問題がないのであれば、
a:hover { text-decoration: underline; }
の記述だけ残していただければ、ページ全てのリンク付きテキストが、
カーソルを当てると下線を表示するようになります。

Answer

田中さん　返信ありがとうございました。

＞td.sdtext a:hover { text-decoration: underline; } を追記後、 
＞a:hover { text-decoration: underline; } を削除したら
>その他のリンク文字には下線が表示されなったということで間違いないでしょうか。
その通りです。なるべく文字数が少ない方が良いのではと思いまして、どちらかしか記入せずにおりました。

そこで、両方記述することでページ全体もパンくずリストと、ともに下線を表示させることができました。


a:hover { text-decoration: underline; }　これだけですと、パンくずリストには下線が反映されません。

記述場所で上記一文だけでもパンくずリスト装飾ＣＳＳにも反映することが可能なのでしょうか。

例えば、記述する場所や、共通説明文大でなくヘッダーに入れるなど優先順位などあるのでしょうか。

Answer

田中さん　返信ありがとうございました。

数回にわけてのレクチャーありがとうございます。
ちょっとですが記述に対して勉強することができました。

もっとキレイに記述する順序もあると思いますが、参考内容を継ぎ足しでいっているので現状の状態であります。
ご指摘の通りに下線表示が可能になりました。

あらためてありがとうございました。

また何かありましたら質問致します。
よろしくお願いします。

カテゴリー パンくずリスト マウスオーバーで下線をいれるには？

カテゴリー　パンくずリスト　マウスオーバーで下線をいれるには？