質問編集履歴

2

ソースの修正

2023/01/15 02:53

投稿

nasumi
nasumi

スコア11

test CHANGED
File without changes
test CHANGED
@@ -126,7 +126,7 @@
126
126
  ```
127
127
 
128
128
  ```css
129
- // jsでactiveクラスを付ける方のやり方
129
+ // jsでactiveクラスを付ける方のやり方(該当箇所以外は省略)
130
130
 
131
131
  .p-card__box {
132
132
  display: grid;
@@ -150,7 +150,6 @@
150
150
  line-height: 1.6;
151
151
  -webkit-transition: 0.3s;
152
152
  transition: 0.3s;
153
- pointer-events: auto;
154
153
  }
155
154
  @media (hover: hover) {
156
155
  .p-card__title:hover {

1

ソースを追加しました。

2023/01/15 02:51

投稿

nasumi
nasumi

スコア11

test CHANGED
File without changes
test CHANGED
@@ -62,6 +62,7 @@
62
62
  </article>
63
63
  ```
64
64
  ```css
65
+ // pointer-eventsを使った方の書き方
65
66
  .p-card {
66
67
  width: 760px;
67
68
  }
@@ -124,6 +125,41 @@
124
125
  }
125
126
  ```
126
127
 
128
+ ```css
129
+ // jsでactiveクラスを付ける方のやり方
130
+
131
+ .p-card__box {
132
+ display: grid;
133
+ -ms-flex-line-pack: justify;
134
+ align-content: space-between;
135
+ min-height: 190px;
136
+ padding: 20px 16px 16px;
137
+ border-radius: 0 0 10px 10px;
138
+ background-color: #ecf7e4;
139
+ -webkit-transition: 0.3s;
140
+ transition: 0.3s;
141
+ }
142
+ .p-card__box.active {
143
+ background-color: #d2edde;
144
+ }
145
+ .p-card__title {
146
+ display: inline-block;
147
+ margin-top: 16px;
148
+ font-weight: 500;
149
+ font-size: 1.8rem;
150
+ line-height: 1.6;
151
+ -webkit-transition: 0.3s;
152
+ transition: 0.3s;
153
+ pointer-events: auto;
154
+ }
155
+ @media (hover: hover) {
156
+ .p-card__title:hover {
157
+ color: #094;
158
+ }
159
+ }
160
+
161
+ ```
162
+
127
163
  ```js
128
164
  const cardTitleSet = document.querySelectorAll(".p-card__title");
129
165
  const cardTitles = Array.prototype.slice.call(cardTitleSet);