iSaraのQ&Aについて、

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
HTML&CSS でiSaraのHPを作成しています。
その中のQ&Aのjqがわからないので質問させていただきました。

発生している問題・エラーメッセージ

:hoverを指定しているのですが、jqでtext-decoration:none;にした後に、hoverが機能しなくなりました。

該当のソースコード

html｛
<div class="main_block16-list">
          <div class="main_block16-list-top">
            <a><span class="far fa-question-circle"></span>○○○○</a>
            <i class="fas fa-chevron-down"></i>
          </div>
          <div class="main_block16-list-bottom open">
            <p>○○○○</p>
          </div>
        </div>
｝

css　｛
.main_block16-list-top a {
  text-decoration: none;
  color: black;
  width: 1200px;
  text-align: left;
}

.main_block16-list-top a:hover {
  text-decoration: underline;
}


｝

jQ　{
  $('.main_block16-list').click(function(){
    var $bottom = $(this).find('.main_block16-list-bottom');
    $(this).find('a').css('text-decoration' , 'underline');
    $('.main_block16-list').not(this).find('a').css('text-decoration' , 'none');
    $('.main_block16-list-top').find('a').hover(function(){
      $(this).find('a').css('text-decoration' , 'underline');
    },function(){
      $(this).find('a').css('text-decoration' , 'none');
    });
    if ($bottom.hasClass('open')) {
      $bottom.slideUp(300);
      $bottom.removeClass('open');
      $(this).find('i').attr('class' , 'fas fa-chevron-down');
    } else {
      $bottom.slideDown(300);
      $bottom.addClass('open');
      $(this).find('i').attr('class' , 'fas fa-chevron-up');
    }
  });
}

試したこと

内容としましては、:hoverでは個々にunderlineを反応。
click(function{})ではclickした物以外はunderlineがnoneの状態。

補足情報（FW/ツールのバージョンなど）

わかりずらいですが、要はjQのclickを採用した際に、cssの:hoverが反応しなくなりました。
text-decoration:none;を採用するとそれ以降は反応しないので対処の仕方、もしくはiSaraの
模範解答があれば教えていただきたいと思います。

※前述が不足していて申し訳ないのですが、isaraの内容としては、
clickした対象のunderlineは、clickした対象以外をclickしないとそのまま(underlineがあるまま)になっており、かつ、hoverはずっと機能している状態になっております。

Comments

[kei344]

（質問文は編集できます）質問文のHTML/CSS/JSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[nekomannma]

ご指導ありがとうございました。

Answer 1

これclickのたびにhover増えるんじゃない？独立したらどう？
thisの意味も中と外じゃ違うと思う。

  $('.main_block16-list').click(function(){
    var $bottom = $(this).find('.main_block16-list-bottom');
    $(this).find('a').css('text-decoration' , 'underline');
    $('.main_block16-list').not(this).find('a').css('text-decoration' , 'none');
    /*$('.main_block16-list-top').find('a').hover(function(){
      $(this).find('a').css('text-decoration' , 'underline');
    },function(){
      $(this).find('a').css('text-decoration' , 'none');
    });*/
    if ($bottom.hasClass('open')) {
      $bottom.slideUp(300);
      $bottom.removeClass('open');
      $(this).find('i').attr('class' , 'fas fa-chevron-down');
    } else {
      $bottom.slideDown(300);
      $bottom.addClass('open');
      $(this).find('i').attr('class' , 'fas fa-chevron-up');
    }
  });
  // セレクタは適当
  $('.main_block16-list-top a').hover(function(){
    $(this).css('text-decoration' , 'underline');
  },function(){
    $(this).css('text-decoration' , 'none');
  });

Comments

[nekomannma]

ご指摘ありがとうございます。
前述が不足していて申し訳ないのですが、isaraの内容としては、
clickした対象のunderlineは、clickした対象以外をclickしないとそのまま(underlineがあるまま)になっており、かつ、hoverはずっと機能している状態になっております。
恐れ入りますが、こちらの回答もわかるようでしたらご指摘いただけると幸いです。