質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

911閲覧

下線を引きたくない場所にまで下線が引かれる

yuta_bsn

総合スコア7

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/07/05 13:09

<h3 class="faq-itemTtl">のテキストのみにhover時に下線を引きたいのですが、<i class="far fa-question-circle">のところにまで引かれてしまいます。 jsが原因でi要素に対してcssを指定しても効かず、思うようにいきません。どのようにすれば上手くいくのでしょうか? テキストを<span>でマークアップする等して対応するしかないのでしょうか?

なにか良い案があれば教えていただきたいです。

html

1 <section class="faq"> 2 <div class="faq-inner"> 3 <h2 class="faq-ttl"><i class="far fa-envelope-open"></i>よくある質問</h2> 4 <div class="faq-box"> 5 <ul class="faq-list"> 6 <li class="faq-item"> 7 <h3 class="faq-itemTtl"><i class="far fa-question-circle"></i>プログラミングスキルは必要ですか?</h3> <!--ここです--> 8 <p class="faq-itemTxt"> 9 いいえ、必要ありません。しかし、iSaraでは参加費以上の金額が稼げることを保障しています。 10 従って、事前通話面談時点で簡単なテストを実施し、場合によってはお断りをしております。 11 この点だけはご了承ください。 12 </p> 13 </li> 14 <li class="faq-item"> 15 <h3 class="faq-itemTtl"><i class="far fa-question-circle"></i>参加費以上に稼げなかったらどうなりますか?</h3> <!--ここです--> 16 <p class="faq-itemTxt"> 17 参加費である258,000円以上の金額をトータルで稼ぐまで、無期限でサポート延長いたします。 18 (講座参加後、週30時間以上の実践をすることと、週1回の実践報告をすることが延長条件です。) 19 きちんと学び実践すれば、フリーランスでも収入を作ることは十分に可能です。 20 </p> 21 </li> 22 ・・・ 23      </section>

scss

1// faq 2.faq-inner { 3 padding: 17px; 4 font-weight: 600; 5 .faq-ttl { 6 font-size: 1.8rem; 7 line-height: 2.2; 8 font-weight: 600; 9 text-align: center; 10 i { 11 font-size: 1.6rem; 12 margin-right: 3px; 13 } 14 } 15} 16.faq-box { 17 .faq-list { 18 margin: 20px 0; 19 } 20} 21.faq-item { 22 border-radius: 3px; 23 box-shadow: 0 1px #F3F3F3; 24 cursor: pointer; 25 &:not(:last-of-type) { 26 margin-bottom: 5px; 27 } 28 .faq-itemTtl { 29 font-size: 1.5rem; 30 line-height: 1.1; 31 font-weight: 600; 32 border: 1px solid #E5E5E5; 33 padding: 11px; 34 letter-spacing: .1em; 35 display: flex; 36 align-items: center; 37 position: relative; 38 &::after { 39 content: ""; 40 width: 7px; 41 height: 7px; 42 border-bottom: 4px solid #E5E5E5; 43 border-right: 4px solid #E5E5E5; 44 position: absolute; 45 transform: rotate(45deg); 46 right: 15px; 47 } 48 &.add-active { 49 &::after { 50 content: ""; 51 border-bottom: none; 52 border-right: none; 53 border-top: 4px solid #E5E5E5; 54 border-right: 4px solid #E5E5E5; 55 transform: rotate(-45deg); 56 } 57 } 58 i { 59 color: #026EA8; 60 font-size: 1.3rem; 61 } 62 } 63 .faq-itemTxt { 64 font-size: 1.2rem; 65 line-height: 1.6; 66 letter-spacing: .1em; 67 padding: 20px; 68 padding-top: 0; 69 display: none; 70 &::before { 71 content: ""; 72 display: block; 73 width: 100%; 74 height: 20px; 75 } 76 } 77}

js

1 // faq 2 $('.faq-item').on('click', function(){ 3 $(this).find('.faq-itemTxt').stop().slideToggle(250); 4 $(this).find('.faq-itemTtl').toggleClass('add-active'); 5 }); 6 $('.faq-item').hover( 7 function() { 8 $(this).find('.faq-itemTtl').css('text-decoration', 'underline'); 9 }, 10 function() { 11 $(this).find('.faq-itemTtl').css('text-decoration', 'none'); 12 } 13 );

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/07/05 14:21

SCSSをCSSに書き下してみてはどうですか?
yuta_bsn

2020/07/05 16:21

そうするとどのようなメリットがあるのでしょうか?
guest

回答1

0

ベストアンサー

テキストを<span>でマークアップする等して対応するしかないのでしょうか?

そのとおりです。<i><h3>の一部なので、h3に下線を引くと、<i>を含んだ中身全体に対して引かれることになります。

投稿2020/07/05 14:14

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuta_bsn

2020/07/05 16:20

ご回答ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問