[ 解決済 ] リンク文字のマウスホバーの下線
[ 解決済 ] リンク文字のマウスホバーの下線
- このトピックには6件の返信、2人の参加者があり、最後に
により4年、 7ヶ月前に更新されました。
-
投稿
-
■ 利用テーマとバージョン :
Lightning Proバージョン: 8.9.1
Lightning Skin Pale バージョン 8.1.2◼︎質問
テキストのリンク箇所にマウスホバーすると下線がつくエリア、つかないエリアがあるのは何か設定の違いでしょうか？
ウィジェットエリアには下線が付く、
固定ページのコンテンツエリアは付かない？グローバルメニュー以外は全てリンクにはホバーで下線が入るエフェクトにしたい思いご質問させていただきました。
以下の CSS で、マウスホバーすると下線がつくようになります。
.****** a:hover{ text-decoration: underline; }****** はクラス名です。
該当箇所のクラス名はデベロッパーツールで確認してください。場所によってはクラス名を複数指定しないと CSS が効かないことがあるかもしれません。
対馬さま
いつもありがとうございます。
固定ページのコンテナエリア内だと
<p class=”******（クラス名）”>でも<span class=”******（クラス名）”>でもアンダーライン表示しませんでした。
該当ページの追加CSSに!importantをつけても反映されないんでしょうかね・・・いつも初歩質問ばかりで本当にすみません
Pale のデモページ https://demo.dev3.biz/pale/guidance/dental/ を例に
図解しますので、添付画像を見て①～⑦の手順通りにやってみてください。該当ページの追加CSSに!importantをつけても反映されないんでしょうかね・・・
!important はできるだけ使わない方がよいです。
上記の図解の通りやっても下線がつかない場合は、underline の後ろに半角スペースを空けて
!important を追加してもよいと思います。対馬さま
図解とてもわかりやすいです。本当にありがとうございます。
固定ページの通常段落だと<p> のclassになるという事ですよね？.p a:hover{
text-decoration: underline;
}これを該当ページの追加CSSに入れても該当せず・・・
——そして私の質問の仕方がまずかったのですが、
リンク文字に「マウスオン」した際に、アンダーラインが
出る場所と、出ない場所があるのを統一したいな・・・と思ったのがそもそもの質問でした。同じhtmlを固定ページのコンテナと、ウィジェットに入れても
アンダーラインの表示方法は違うこれは、もう仕方ないんですかね・・・
もしかしたら根本を勘違いしているズレた質問でしたら申し訳ありません・・・
.p a:hover{ text-decoration: underline; }は間違いで、正解は
p a:hover{ text-decoration: underline; }です。
段落の p はクラス名でないので . をつけません。
<p class="******">の ****** がクラス名です。ただし、上記の正解 CSS を追加してもたぶん反映されないと思います。
理由は以下のページの「3.4. CSSの指定の強さ」を読んでください。指定が強い CSS がすでに存在するときは、それ以上の指定の強さが必要です。
アンダーラインが出る場所と、出ない場所があるのを統一したいな・・・
たぶん、以下の CSS を追加すれば、グローバルメニューも含めて
すべてのテキストリンクにホバー時の下線をつけることができます。a:hover { text-decoration: underline !important; }今回の poohdai515 さんの場合、
上記の CSS に加えてグローバルメニューのテキストリンクに
クラス指定をつけてtext-decoration: none !important;を指定するやり方もありますが、
!importantを!importantで上書きするのは変なかんじです。!importantは他にやり方がない場合の最終手段ですので。該当箇所のクラス指定を調べて、個々に CSS を上書きしてやるのが
正統な、破綻が起きないやり方だと思います。同じhtmlを固定ページのコンテナと、ウィジェットに入れても
アンダーラインの表示方法は違うこれは、もう仕方ないんですかね・・・
はい、仕方ないです。
テーマ制作者がそのように意図して作ったものなので。
- このトピックに返信するにはログインが必要です。
