hoverイベントについて

JQueryの学習中、つまずいた所のメモ。

index.html

<div class="lesson">
  <div class="lesson-icon">
    <img src="https://prog-8.com/images/html/advanced/html.png">
    <p>HTML & CSS</p>
  </div>
  <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
</div>

stylesheet.css

.text-contents {
  margin: 3% auto;
  width: 80%;
  font-size: 12px;
  color: #b3aeb5;
  display: none;
}

.text-active {
  display: block;
}

script.js

$('.lesson').hover(
  function(){
    $(this).find('.text-contents').addClass('text-active');
  },
  function(){
    $(this).find('.text-contents').removeClass('text-active');
  }
);

##問題点##

hoverのセレクタを$('.lesson-icon')にしていて、プログラムが反応しなかった。
恐らくfindのセレクタ('.text-contents')を内包していないため。

##解決法##

hoverのセレクタを$('.lesson')にすることで、('.text-contents')を内包し、作動した。

##ポイント##
hoverイベントのセレクタはfindのセレクタを内包しているか確認する。

【Progate】JQuery　道場コース　中級編　2.レッスン一覧をつくろう