質問編集履歴
2
Chromeでの症状をgifで追加，タイトルに「chromeで」を追加
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
cssのhoverがかからない
|
|
1
|
+
chromeでcssのhoverがかからない
|
body
CHANGED
|
@@ -161,4 +161,7 @@
|
|
|
161
161
|
|
|
162
162
|
###[√] 問題
|
|
163
163
|
bothのサムネイルにhoverした際のcssがすぐに効かない。
|
|
164
|
-
サムネイル群の中でカーソルをうろちょろさせてからでないと、:hoverが作動しない。
|
|
164
|
+
サムネイル群の中でカーソルをうろちょろさせてからでないと、:hoverが作動しない。
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
(Chromeでの動作)
|
1
内容の更新
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
cssのhoverがかからない
|
body
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
###[√] cssが
|
|
1
|
+
###[√] cssのhoverが有効になる場合とならない場合がある
|
|
2
2
|
|
|
3
|
+
>>[実際の動作を確認する](http://lan.webcrow.jp/sample/20170300/thumbnail.html)
|
|
4
|
+
|
|
5
|
+
###[√] code
|
|
3
6
|
```html
|
|
7
|
+
|
|
4
8
|
<!DOCTYPE html>
|
|
5
9
|
|
|
6
10
|
<html>
|
|
@@ -16,7 +20,7 @@
|
|
|
16
20
|
margin:10px;
|
|
17
21
|
}
|
|
18
22
|
|
|
19
|
-
|
|
23
|
+
.wrap{
|
|
20
24
|
box-sizing:content-box;
|
|
21
25
|
position:relative;
|
|
22
26
|
width:600px;
|
|
@@ -24,7 +28,7 @@
|
|
|
24
28
|
border:1px solid #ddd;
|
|
25
29
|
margin:100px auto;
|
|
26
30
|
}
|
|
27
|
-
|
|
31
|
+
.wrap> *{
|
|
28
32
|
list-style:none;
|
|
29
33
|
position:absolute;
|
|
30
34
|
display:inline-block;
|
|
@@ -54,20 +58,23 @@
|
|
|
54
58
|
right:0;
|
|
55
59
|
width:500px;
|
|
56
60
|
height:500px;
|
|
57
|
-
transition:0.
|
|
61
|
+
transition:0.1s;
|
|
58
62
|
opacity:0;
|
|
59
63
|
}
|
|
60
|
-
.img:nth-
|
|
64
|
+
.img:nth-last-child(4){
|
|
61
65
|
background:#eee;
|
|
62
66
|
opacity:1;
|
|
63
67
|
}
|
|
64
|
-
.img:nth-
|
|
68
|
+
.img:nth-last-child(3){background:azure;}
|
|
65
|
-
.img:nth-
|
|
69
|
+
.img:nth-last-child(2){background:lightYellow;}
|
|
66
|
-
.img:nth-
|
|
70
|
+
.img:nth-last-child(1){background:pink;}
|
|
67
71
|
|
|
68
72
|
#thumb01input,
|
|
69
73
|
#thumb02input,
|
|
74
|
+
#thumb03input,
|
|
75
|
+
#thumb001input,
|
|
76
|
+
#thumb002input,
|
|
70
|
-
#
|
|
77
|
+
#thumb003input{display:none;}
|
|
71
78
|
|
|
72
79
|
</style>
|
|
73
80
|
</head>
|
|
@@ -81,12 +88,12 @@
|
|
|
81
88
|
<h2>css,hover</h2>
|
|
82
89
|
|
|
83
90
|
<style>
|
|
84
|
-
#thumb1:hover ~ #img1
|
|
91
|
+
#thumb1:hover ~ #img1,
|
|
85
|
-
#thumb2:hover ~ #img2
|
|
92
|
+
#thumb2:hover ~ #img2,
|
|
86
|
-
#thumb3:hover ~ #img3{opacity:1;}
|
|
93
|
+
#thumb3:hover ~ #img3{opacity:1;z-index:100;}
|
|
87
94
|
</style>
|
|
88
95
|
|
|
89
|
-
<ul
|
|
96
|
+
<ul class="wrap">
|
|
90
97
|
<li id="thumb1" class="thumb"></li>
|
|
91
98
|
<li id="thumb2" class="thumb"></li>
|
|
92
99
|
<li id="thumb3" class="thumb"></li>
|
|
@@ -101,12 +108,12 @@
|
|
|
101
108
|
<h2>input,checked</h2>
|
|
102
109
|
|
|
103
110
|
<style>
|
|
104
|
-
#thumb01input:checked ~ #img01
|
|
111
|
+
#thumb01input:checked ~ #img01,
|
|
105
|
-
#thumb02input:checked ~ #img02
|
|
112
|
+
#thumb02input:checked ~ #img02,
|
|
106
|
-
#thumb03input:checked ~ #img03{opacity:1;}
|
|
113
|
+
#thumb03input:checked ~ #img03{opacity:1;z-index:100;}
|
|
107
114
|
</style>
|
|
108
115
|
|
|
109
|
-
<div
|
|
116
|
+
<div class="wrap">
|
|
110
117
|
<input id="thumb01input" type="radio" name="myradio1"></input>
|
|
111
118
|
<label for="thumb01input" id="thumb01" class="thumb"></label>
|
|
112
119
|
<input id="thumb02input" type="radio" name="myradio1"></input>
|
|
@@ -124,24 +131,34 @@
|
|
|
124
131
|
<h2>both</h2>
|
|
125
132
|
|
|
126
133
|
<style>
|
|
127
|
-
|
|
134
|
+
#thumb001input:checked ~ #img001,
|
|
135
|
+
#thumb002input:checked ~ #img002,
|
|
136
|
+
#thumb003input:checked ~ #img003{opacity:1;z-index:100;}
|
|
137
|
+
#thumb001input:hover ~ #img001,
|
|
138
|
+
#thumb002input:hover ~ #img002,
|
|
139
|
+
#thumb003input:hover ~ #img003{opacity:1;z-index:200;}
|
|
128
140
|
</style>
|
|
129
141
|
|
|
130
|
-
<ul>
|
|
131
|
-
|
|
142
|
+
<div class="wrap">
|
|
143
|
+
<input id="thumb001input" type="radio" name="myradio2"></input>
|
|
144
|
+
<label for="thumb001input" id="thumb001" class="thumb"></label>
|
|
145
|
+
<input id="thumb002input" type="radio" name="myradio2"></input>
|
|
132
|
-
<
|
|
146
|
+
<label for="thumb002input" id="thumb002" class="thumb"></label>
|
|
147
|
+
<input id="thumb003input" type="radio" name="myradio2"></input>
|
|
133
|
-
<
|
|
148
|
+
<label for="thumb003input" id="thumb003" class="thumb"></label>
|
|
134
|
-
<
|
|
149
|
+
<div id="img000" class="img"></div>
|
|
135
|
-
<
|
|
150
|
+
<div id="img001" class="img"></div>
|
|
136
|
-
<
|
|
151
|
+
<div id="img002" class="img"></div>
|
|
137
|
-
<
|
|
152
|
+
<div id="img003" class="img"></div>
|
|
138
|
-
</
|
|
153
|
+
</div>
|
|
139
154
|
|
|
140
155
|
</body>
|
|
141
156
|
|
|
142
157
|
</html>
|
|
143
158
|
```
|
|
159
|
+
期待される動作:
|
|
160
|
+
サムネイルがhover/checkされたら、別窓に拡大表示する
|
|
144
161
|
|
|
145
|
-
|
|
162
|
+
###[√] 問題
|
|
146
|
-
|
|
147
|
-
|
|
163
|
+
bothのサムネイルにhoverした際のcssがすぐに効かない。
|
|
164
|
+
サムネイル群の中でカーソルをうろちょろさせてからでないと、:hoverが作動しない。
|