質問編集履歴
2
Chromeでの症状をgifで追加，タイトルに「chromeで」を追加
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
cssのhoverがかからない
|
|
1
|
+
chromeでcssのhoverがかからない
|
test
CHANGED
|
@@ -325,3 +325,9 @@
|
|
|
325
325
|
bothのサムネイルにhoverした際のcssがすぐに効かない。
|
|
326
326
|
|
|
327
327
|
サムネイル群の中でカーソルをうろちょろさせてからでないと、:hoverが作動しない。
|
|
328
|
+
|
|
329
|
+
|
|
330
|
+
|
|
331
|
+
|
|
332
|
+
|
|
333
|
+
(Chromeでの動作)
|
1
内容の更新
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
c
|
|
1
|
+
cssのhoverがかからない
|
test
CHANGED
|
@@ -1,9 +1,17 @@
|
|
|
1
|
-
###[√] cssが
|
|
1
|
+
###[√] cssのhoverが有効になる場合とならない場合がある
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
2
|
-
|
|
5
|
+
>>[実際の動作を確認する](http://lan.webcrow.jp/sample/20170300/thumbnail.html)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
3
|
-
|
|
9
|
+
###[√] code
|
|
4
10
|
|
|
5
11
|
```html
|
|
6
12
|
|
|
13
|
+
|
|
14
|
+
|
|
7
15
|
<!DOCTYPE html>
|
|
8
16
|
|
|
9
17
|
|
|
@@ -34,7 +42,7 @@
|
|
|
34
42
|
|
|
35
43
|
|
|
36
44
|
|
|
37
|
-
|
|
45
|
+
.wrap{
|
|
38
46
|
|
|
39
47
|
box-sizing:content-box;
|
|
40
48
|
|
|
@@ -50,7 +58,7 @@
|
|
|
50
58
|
|
|
51
59
|
}
|
|
52
60
|
|
|
53
|
-
|
|
61
|
+
.wrap> *{
|
|
54
62
|
|
|
55
63
|
list-style:none;
|
|
56
64
|
|
|
@@ -110,13 +118,13 @@
|
|
|
110
118
|
|
|
111
119
|
height:500px;
|
|
112
120
|
|
|
113
|
-
transition:0.
|
|
121
|
+
transition:0.1s;
|
|
114
122
|
|
|
115
123
|
opacity:0;
|
|
116
124
|
|
|
117
125
|
}
|
|
118
126
|
|
|
119
|
-
.img:nth-
|
|
127
|
+
.img:nth-last-child(4){
|
|
120
128
|
|
|
121
129
|
background:#eee;
|
|
122
130
|
|
|
@@ -124,11 +132,11 @@
|
|
|
124
132
|
|
|
125
133
|
}
|
|
126
134
|
|
|
127
|
-
.img:nth-
|
|
135
|
+
.img:nth-last-child(3){background:azure;}
|
|
128
|
-
|
|
136
|
+
|
|
129
|
-
.img:nth-
|
|
137
|
+
.img:nth-last-child(2){background:lightYellow;}
|
|
130
|
-
|
|
138
|
+
|
|
131
|
-
.img:nth-
|
|
139
|
+
.img:nth-last-child(1){background:pink;}
|
|
132
140
|
|
|
133
141
|
|
|
134
142
|
|
|
@@ -136,7 +144,13 @@
|
|
|
136
144
|
|
|
137
145
|
#thumb02input,
|
|
138
146
|
|
|
147
|
+
#thumb03input,
|
|
148
|
+
|
|
149
|
+
#thumb001input,
|
|
150
|
+
|
|
151
|
+
#thumb002input,
|
|
152
|
+
|
|
139
|
-
#thumb03input{display:none;}
|
|
153
|
+
#thumb003input{display:none;}
|
|
140
154
|
|
|
141
155
|
|
|
142
156
|
|
|
@@ -164,17 +178,17 @@
|
|
|
164
178
|
|
|
165
179
|
<style>
|
|
166
180
|
|
|
167
|
-
#thumb1:hover ~ #img1
|
|
181
|
+
#thumb1:hover ~ #img1,
|
|
168
|
-
|
|
182
|
+
|
|
169
|
-
#thumb2:hover ~ #img2
|
|
183
|
+
#thumb2:hover ~ #img2,
|
|
170
|
-
|
|
184
|
+
|
|
171
|
-
#thumb3:hover ~ #img3{opacity:1;}
|
|
185
|
+
#thumb3:hover ~ #img3{opacity:1;z-index:100;}
|
|
172
186
|
|
|
173
187
|
</style>
|
|
174
188
|
|
|
175
189
|
|
|
176
190
|
|
|
177
|
-
<ul
|
|
191
|
+
<ul class="wrap">
|
|
178
192
|
|
|
179
193
|
<li id="thumb1" class="thumb"></li>
|
|
180
194
|
|
|
@@ -204,17 +218,17 @@
|
|
|
204
218
|
|
|
205
219
|
<style>
|
|
206
220
|
|
|
207
|
-
#thumb01input:checked ~ #img01
|
|
221
|
+
#thumb01input:checked ~ #img01,
|
|
208
|
-
|
|
222
|
+
|
|
209
|
-
#thumb02input:checked ~ #img02
|
|
223
|
+
#thumb02input:checked ~ #img02,
|
|
210
|
-
|
|
224
|
+
|
|
211
|
-
#thumb03input:checked ~ #img03{opacity:1;}
|
|
225
|
+
#thumb03input:checked ~ #img03{opacity:1;z-index:100;}
|
|
212
226
|
|
|
213
227
|
</style>
|
|
214
228
|
|
|
215
229
|
|
|
216
230
|
|
|
217
|
-
<div
|
|
231
|
+
<div class="wrap">
|
|
218
232
|
|
|
219
233
|
<input id="thumb01input" type="radio" name="myradio1"></input>
|
|
220
234
|
|
|
@@ -250,29 +264,45 @@
|
|
|
250
264
|
|
|
251
265
|
<style>
|
|
252
266
|
|
|
253
|
-
|
|
267
|
+
#thumb001input:checked ~ #img001,
|
|
268
|
+
|
|
269
|
+
#thumb002input:checked ~ #img002,
|
|
270
|
+
|
|
271
|
+
#thumb003input:checked ~ #img003{opacity:1;z-index:100;}
|
|
272
|
+
|
|
273
|
+
#thumb001input:hover ~ #img001,
|
|
274
|
+
|
|
275
|
+
#thumb002input:hover ~ #img002,
|
|
276
|
+
|
|
277
|
+
#thumb003input:hover ~ #img003{opacity:1;z-index:200;}
|
|
254
278
|
|
|
255
279
|
</style>
|
|
256
280
|
|
|
257
281
|
|
|
258
282
|
|
|
259
|
-
<ul>
|
|
260
|
-
|
|
261
|
-
|
|
283
|
+
<div class="wrap">
|
|
284
|
+
|
|
262
|
-
|
|
285
|
+
<input id="thumb001input" type="radio" name="myradio2"></input>
|
|
286
|
+
|
|
287
|
+
<label for="thumb001input" id="thumb001" class="thumb"></label>
|
|
288
|
+
|
|
289
|
+
<input id="thumb002input" type="radio" name="myradio2"></input>
|
|
290
|
+
|
|
263
|
-
<li id="thumb2"></l
|
|
291
|
+
<label for="thumb002input" id="thumb002" class="thumb"></label>
|
|
292
|
+
|
|
264
|
-
|
|
293
|
+
<input id="thumb003input" type="radio" name="myradio2"></input>
|
|
294
|
+
|
|
265
|
-
<li id="thumb3"></l
|
|
295
|
+
<label for="thumb003input" id="thumb003" class="thumb"></label>
|
|
266
|
-
|
|
296
|
+
|
|
267
|
-
<
|
|
297
|
+
<div id="img000" class="img"></div>
|
|
268
|
-
|
|
298
|
+
|
|
269
|
-
<
|
|
299
|
+
<div id="img001" class="img"></div>
|
|
270
|
-
|
|
300
|
+
|
|
271
|
-
<
|
|
301
|
+
<div id="img002" class="img"></div>
|
|
272
|
-
|
|
302
|
+
|
|
273
|
-
<
|
|
303
|
+
<div id="img003" class="img"></div>
|
|
274
|
-
|
|
304
|
+
|
|
275
|
-
</
|
|
305
|
+
</div>
|
|
276
306
|
|
|
277
307
|
|
|
278
308
|
|
|
@@ -284,10 +314,14 @@
|
|
|
284
314
|
|
|
285
315
|
```
|
|
286
316
|
|
|
287
|
-
|
|
317
|
+
期待される動作:
|
|
318
|
+
|
|
288
|
-
|
|
319
|
+
サムネイルがhover/checkされたら、別窓に拡大表示する
|
|
320
|
+
|
|
321
|
+
|
|
322
|
+
|
|
289
|
-
|
|
323
|
+
###[√] 問題
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
324
|
+
|
|
293
|
-
|
|
325
|
+
bothのサムネイルにhoverした際のcssがすぐに効かない。
|
|
326
|
+
|
|
327
|
+
サムネイル群の中でカーソルをうろちょろさせてからでないと、:hoverが作動しない。
|