Progateでの疑問。jQueryにおけるaddClassメソッドとremoveClassメソッド。

ProgateでjQueryを勉強していたのですがわからない部分があったので質問させていただきます。
jQueryで追加したtext-activeはどの要素を指しているのかがわかりません。
なぜtext-activeがjQueryで追加されるとtext-contentsが表示されるのでしょうか。
text-activeはcssでdisplay: biock;とし記載されていませんがなぜ、要素が決まるのでしょうか。

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

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

jQuery
1$(function() {
2
3  $('#login-show').click(function() {
4    $('#login-modal').fadeIn();
5  });
6
7  $('.signup-show').click(function() {
8    $('#signup-modal').fadeIn();
9  });
10
11  $('.close-modal').click(function() {
12    $('#login-modal').fadeOut();
13    $('#signup-modal').fadeOut();
14  });
15  
16  $('.lesson-hover').hover(
17    function() {
18      // 子要素の「.text-contents」の要素を取得し、text-activeクラスをつけてください
19      $(this).find('.text-contents').addClass('text-active');
20      
21    },
22    function() {
23      // 子要素の「.text-contents」の要素を取得し、text-activeクラスを外してください
24      $(this).find('.text-contents').removeClass('text-active');
25      
26    }
27  );
28});
29

Lhankor_Mhy

2021/09/22 02:20

「要素が決まる」とは、どのような処理を想定されていますか？

Hiroto_4431

2021/09/22 02:25

text-activeが追加されると、なぜtext-contentの中身が表示されるのか？ということです。

Lhankor_Mhy

2021/09/22 02:28

わかりました。回答しました。

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

回答1件

ベストアンサー

CSSは「後書き優先」という原則があり、前に書いたものは後から書いたものに上書きされます。

ご提示のコードの場合、

css
1.text-contents {
2  margin: 3% auto;
3  width: 80%;
4  display: none;
5  font-size: 12px;
6  color: #b3aeb5;
7}
8
9.text-active {
10  display: block;
11}

というCSSですから、text-contents と text-active の二つのクラスが両方ともついている場合display: noneが上書きで打ち消されて、display: blockが適用されます。
display: noneは「表示しない」というスタイルですので、display: noneが打ち消されるということは、「表示しない」が打ち消されるということです。

つまり、text-contents というクラスの要素に、text-active というクラスを追加すると、表示されていなかった要素が表示されることになります。

投稿2021/09/22 02:27

Lhankor_Mhy

総合スコア36960