質問編集履歴
2
ソースの修正
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
ソースを追加しました。
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);
|