hoverメソッド時のコードでダメな理由が分からないです

progateのjqurey道場コースを学習しています。
課題の内容は『画像にマウスを乗せると、その下にレッスンの説明が出てくるようにします。
また、マウスを外すと、元のように説明が隠れるようにします。』で、hoverイベントを使う課題です。
課題としてはクリアしたのですが、疑問点を２点解消したく質問しました。
クリア出来た課題のコードを載せています。
１点目
javascriptのコードの『// 言語一覧以下』を見てもらいたいんですが、

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

のセレクタ,.lessonの前にlesson-iconを入れていました。
それではクリアできませんでした。
text-contentsクラスも含めたセレクタである.lessonにしたらうまく行ったのには何か理由があるのでしょうか？
『hover セレクタ指定ルール』と検索してもわからなかったです。
２点目
1点目と同じコード場所なんですが、
addClass、removeClassを使う前にfadeIn,fadeOutで実現しようと試みましたが、それでは無理でした。
これにもできない理由があるのでしょうか？教えて下さい。

html
1コード
2<!DOCTYPE html>
3<html>
4>
5  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
6</head>
7<body>
8  <header>
9    <div class="container">
10      <div class="header-left">
11        <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
12      </div>
13      <div class="header-right">
14        <div class="login">ログイン</div>
15      </div>
16    </div>
17  </header>
18  <div class="signup-modal-wrapper" id="signup-modal">
19    <div class="modal">
20      <div id="close-modal">
21        <i class="fa fa-2x fa-times"></i>
22      </div>
23      <div id="signup-form">
24        <h2>Emailで新規登録</h2>
25        <form action="#">
26          <input class="form-control" type="text" placeholder="メールアドレス">
27          <input class="form-control" type="password" placeholder="パスワード">
28          <div id="submit-btn">新規登録</div>
29        </form>
30      </div>
31    </div>
32  </div>
33  <div class="top-wrapper">
34    <div class="container">
35      <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
36      <p>progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
37      <div class="btn signup signup-show">新規登録はこちら</div>
38      <p>or</p>
39      <div class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</div>
40      <div class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</div>
41    </div>
42  </div>
43  
44  <!-- レッスン一覧部分 -->
45  <div class="lesson-wrapper">
46    <div class="container">
47      <div class="heading">
48        <h2>Learn Where to Get Started!</h2>
49      </div>
50      <div class="lessons">
51        <div class="lesson">
52          <div class="lesson-icon">
53            <img src="https://prog-8.com/images/html/advanced/html.png">
54            <p>HTML & CSS</p>
55          </div>
56          <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
57        </div>
58        <div class="lesson">
59          <div class="lesson-icon">
60            <img src="https://prog-8.com/images/html/advanced/jQuery.png">
61            <p>jQuery</p>
62          </div>
63          <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
64        </div>
65        <div class="lesson">
66          <div class="lesson-icon">
67            <img src="https://prog-8.com/images/html/advanced/ruby.png">
68            <p>Ruby</p>
69          </div>
70          <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
71        </div>
72        <div class="lesson">
73          <div class="lesson-icon">
74            <img src="https://prog-8.com/images/html/advanced/php.png">
75            <p>PHP</p>
76          </div>
77          <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
78        </div>
79      </div>
80    </div>
81  </div>
82  <!-- レッスン一覧ここまで -->
83  
84  <div class="faq-wrapper">
85    <div class="container">
86      <div class="heading">
87        <h2>FAQ</h2>
88      </div>
89      <div class="faq">
90      </div>
91    </div>
92  </div>
93  <div class="message-wrapper">
94    <div class="container">
95      <div class="heading">
96        <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
97        <h3 id="tagline">Let's learn to code, learn to be creative!</h3>
98      </div>
99      <span class="btn message signup-show">さっそく開発する</span>
100    </div>
101  </div>
102  <footer>
103    <div class="container">
104      <img src="https://prog-8.com/images/html/advanced/footer_logo.png">
105      <p>Learn to Code,Learn to be Creative.</p>
106    </div>
107  </footer>
108  <script src="script.js"></script>
109</body>
110</html>

CSS
1コード
2body {
3  margin: 0;
4}
5
6a {
7  text-decoration: none;
8}
9
10.top-wrapper {
11  padding: 180px 0 100px 0;
12  background-image: url(https://prog-8.com/images/html/advanced/top.png);
13  background-size: cover;
14  color: white;
15  text-align: center;
16}
17
18.container {
19  width: 1170px;
20  padding: 0 15px;
21  margin: 0 auto;
22}
23
24.top-wrapper h1 {
25  opacity: 0.7;
26  font-size: 45px;
27  letter-spacing: 5px;
28}
29
30.top-wrapper p {
31  opacity: 0.7;
32  font-size: 14px;
33  margin-bottom: 35px;
34}
35
36.signup {
37  background-color: #239b76;
38}
39
40.facebook {
41  background-color: #3b5998;
42  margin-right: 10px;
43}
44
45.twitter {
46  background-color: #55acee;
47}
48
49.btn {
50  padding: 8px 24px;
51  color: white;
52  display: inline-block;
53  opacity: 0.8;
54  border-radius: 4px;
55  cursor: pointer;
56}
57
58.btn:hover {
59  opacity: 1;
60}
61
62.fa {
63  margin-right: 5px;
64}
65
66header {
67  height: 65px;
68  width: 100%;
69  background-color: rgba(34,49,52,0.9);
70  position :fixed;
71  top: 0;
72  z-index: 10;
73}
74
75.logo {
76  width: 124px;
77  margin-top: 20px;
78}
79
80.header-left {
81  float: left;
82}
83
84.header-right {
85  float: right;
86  background-color: rgba(255,255,255,0.3);
87  transition: all 0.5s;
88}
89
90.header-right:hover {
91  background-color: rgba(255,255,255,0.5);
92}
93
94.header-right .login {
95  line-height: 65px;
96  padding: 0 25px;
97  color: white;
98  cursor: pointer;
99  display: block;
100}
101
102/*モーダル*/
103.signup-modal-wrapper {
104  display: none;
105  position: fixed;
106  top: 0;
107  right: 0;
108  bottom: 0;
109  left: 0;
110  background-color: rgba(0, 0, 0, 0.6);
111  z-index: 100;
112  display: none;
113}
114
115.modal {
116  position: absolute;
117  top: 20%;
118  left: 34%;
119  background-color: #e6ecf0;
120  padding: 20px 0 40px;
121  border-radius: 10px;
122  width: 450px;
123  height: auto;
124  text-align: center;
125}
126
127.fa-times {
128  position: absolute;
129  top: 12px;
130  right: 12px;
131  color: rgba(128, 128, 128, 0.46);
132  cursor: pointer;
133}
134
135#signup-form {
136  width: 100%;
137}
138
139#signup-form h2 {
140  color: #5f5d60;
141  letter-spacing: 1px;
142  margin-bottom: 40px;
143}
144
145#signup-form input {
146  width: 320px;
147  margin-bottom: 20px;
148  font-size: 12px;
149  padding: 12px 12px;
150  border: 1px solid #d0d5d8;
151  border-radius: 5px;
152}
153
154#submit-btn {
155  display: inline-block;
156  padding: 14px 140px;
157  background-color: #5dca88;
158  border: none;
159  border-radius: 3px;
160  color: white;
161  margin: 10px auto;
162  cursor: pointer;
163}
164
165.lesson-wrapper {
166  height: 500px;
167  padding-bottom: 80px;
168  background-color: #f7f7f7;
169  text-align: center;
170}
171
172.heading {
173  padding-top: 60px;
174  padding-bottom: 30px;
175  color: #5f5d60;
176}
177
178.heading h2 {
179  font-weight: normal;
180}
181
182.lesson {
183  float: left;
184  width: 25%;
185}
186
187.lesson-icon {
188  position: relative;
189  width: 70%;
190  margin: 0 auto;
191}
192
193.lesson-icon p {
194  position: absolute;
195  top: 75px;
196  width: 100%;
197  color: white;
198}
199
200.text-contents {
201  margin: 3% auto;
202  width: 80%;
203  font-size: 12px;
204  color: #b3aeb5;
205  display:none;
206}
207
208.faq-wrapper {
209  background-color: #e6ecf0;
210  text-align: center;
211  padding-bottom: 80px;
212  color: #5f5d60;
213}
214
215.message-wrapper {
216  border-bottom: 1px solid #eee;
217  padding-bottom: 80px;
218  text-align: center;
219}
220
221.message-wrapper .heading h3 {
222  font-weight: normal;
223}
224
225.message {
226  padding: 15px 40px;
227  background-color: #5dca88;
228  cursor: pointer;
229  box-shadow: 0px 7px #1a7940;
230}
231
232.message:active {
233  position: relative;
234  top: 7px;
235  box-shadow: none;
236}
237
238footer img {
239  width: 125px;
240}
241
242footer p {
243  color: #b3aeb5;
244  font-size: 12px;
245}
246
247footer {
248  padding-top: 30px;
249}
250.text-active{
251  display:block;
252}

JavaScript
1コード
2$(function() {
3
4  // 新規登録モーダル
5  
6  $('.signup-show').click(function() {
7    $('#signup-modal').fadeIn();
8  });
9
10  $('#close-modal').click(function() {
11    $('#signup-modal').fadeOut();
12  });
13  
14  // 言語一覧
15  $('.lesson').hover(
16    function(){
17      $(this).find('.text-contents').addClass('text-active');
18    },
19    function(){
20      $(this).find('.text-contents').removeClass('text-active');
21    }
22  );
23   
24  
25
26});
27

回答を得ての追記
１、hoverメソッドのセレクタは関数内のfindメソッドで指定された要素と関係性があることを学んだ。
hoverで指定したセレクタとfindで取得したい要素は別個のものだと間違って理解していた。
２、実際にfadeInとfadeOutのコードを教えてもらった通りに書いてみた。
うまくできた。色々試して見た。→slow入れなくてもできた。ダブルクォーテーションではなくシングルクォーテーションでもできた。
どこが自分の書いたコードとどう違ったのかを検証するために保存しておけばよかった。
学習しながら記録をとるようすべきだった。改善点

行動規範の内容に同意します

回答1件

ベストアンサー

１点目

text-contentsクラスも含めたセレクタである.lessonにしたらうまく行ったのには何か理由があるのでしょうか？

$(this).find('.text-contents')

findは、子孫要素を探しにいきます。.lesson の場合は、その子孫（.lessonを指定したタグの中）に.text-contentsが存在するため、期待通りの動作をしますが、.lesson-iconの場合は、その子孫（.lesson-iconを指定したタグの中）に.text-contentsが見つからないため、期待した動作になりません。

２点目

addClass、removeClassを使う前にfadeIn,fadeOutで実現しようと試みましたが、それでは無理でした。

こちらは多分、fadeIn、fadeOutの書き方が間違ってたのかと思います。
試せてないですが、こんな感じで似たような挙動はできるかと思います。

// 言語一覧
$(".lesson").hover(
  function () {
    $(this)
      .find(".text-contents")
      .fadeIn("slow");
  },
  function () {
    $(this)
      .find(".text-contents")
      .fadeOut("slow");
  }
);

投稿2019/06/02 13:03