質問編集履歴
3
抜けていた情報がある
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,8 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
<button>の記述が誤っていたことに気付き、以下の HTML に変更したところ、
|
|
4
4
|
PC（Windows+chrome）からの閲覧や動作ではまったく問題の無い javascript が
|
|
5
|
-
スマホ（android+chrome）からの閲覧でのみ
|
|
5
|
+
スマホ（android+chrome）からの閲覧でのみ<button>を長押しする、もしくは
|
|
6
|
-
filter: grayscale(0); に変化しない、という問題が発生致しました。
|
|
6
|
+
onclick後で無ければ filter: grayscale(0); に変化しない、という問題が発生致しました。
|
|
7
|
+
ワンタップでもホバー判定はされるものの、filter: grayscale(100%); が変わらず、
|
|
8
|
+
上記の長押し～onclick後に遅れて filter: grayscale(0); となります。
|
|
7
9
|
|
|
8
10
|
javascript 内に touchstart などを加筆するといった自力解決に努めましたが、
|
|
9
11
|
スマホ閲覧での不具合を直すことが出来ません。
|
2
新しく問題が出てきた
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
figure（img）> figcaption（button） で button:hover したら figure
|
|
1
|
+
figure（img）> figcaption（button） で button:hover したら figure（img） を変化させたい
|
test
CHANGED
|
@@ -1,40 +1,104 @@
|
|
|
1
|
-
**
|
|
1
|
+
**新たな問題点（2022/04/10-）**
|
|
2
|
+
|
|
3
|
+
<button>の記述が誤っていたことに気付き、以下の HTML に変更したところ、
|
|
4
|
+
PC（Windows+chrome）からの閲覧や動作ではまったく問題の無い javascript が
|
|
5
|
+
スマホ（android+chrome）からの閲覧でのみ、<button>を長押ししなければ
|
|
6
|
+
filter: grayscale(0); に変化しない、という問題が発生致しました。
|
|
7
|
+
|
|
8
|
+
javascript 内に touchstart などを加筆するといった自力解決に努めましたが、
|
|
9
|
+
スマホ閲覧での不具合を直すことが出来ません。
|
|
10
|
+
どのように記載を修正すれば、スマホ閲覧でも<button>を長押しせずに
|
|
11
|
+
filter: grayscale(0); に変化させられるか、
|
|
12
|
+
どうかご助力、ご回答のほど、何卒よろしくお願い致します。
|
|
13
|
+
|
|
14
|
+
元々記載していた HTML・CSS には 2022/04/08 時点とは違う変更点がある為、
|
|
15
|
+
修正済みとして現状のものに差し替え、一部追加させていただきました。
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
**元々の問題点（2022/04/08時点）**
|
|
2
20
|
|
|
3
21
|
こちらのサイト様や他所や調べても、同様の症状らしきものにすら出会えず、とても困っております。
|
|
4
22
|
親要素となる<figure>内の<img>に対し、子孫要素である<button>をホバーすることで
|
|
5
|
-
<img>に仕込んでいた filter: grayscale(100%); を filter:
|
|
23
|
+
<img>に仕込んでいた filter: grayscale(100%); を filter: grayscale(0); に変化させたいのですが、
|
|
6
24
|
本当にうんともすんとも……。
|
|
7
25
|
それと「子孫要素から親要素に影響を与えることは出来ない」という記事も見かけたものの、
|
|
8
26
|
ここまでコードを書いたのに……と諦め切れず、こちらで質問させて頂きました。
|
|
9
|
-
どうかご助力、ご回答のほど、何卒よろしくお願い致します。
|
|
10
|
-
（キャラクターリストのような
|
|
27
|
+
（キャラクターリストのような複数横並びのものを制作しようと思っています）
|
|
11
28
|
|
|
12
|
-
**
|
|
29
|
+
**追記（2022/04/08時点）**
|
|
13
30
|
|
|
14
31
|
CSSのみの実現や問題解決は困難、と回答者さんが判断された場合は
|
|
15
32
|
こちらの質問内容の実現を可能とするJavaScript、またはjQueryをお教え頂きたく存じます。
|
|
16
33
|
|
|
34
|
+
---
|
|
35
|
+
|
|
17
|
-
### HTML
|
|
36
|
+
### HTML（修正済み）
|
|
18
37
|
```HTML
|
|
38
|
+
<ul>
|
|
39
|
+
<li>
|
|
19
|
-
|
|
40
|
+
<figure>
|
|
20
|
-
|
|
41
|
+
<center><img src="images/sample.png"></center>
|
|
21
|
-
|
|
42
|
+
<figcaption>
|
|
22
|
-
|
|
43
|
+
<h3>ファーストネーム・<br>ファミリーネーム</h3>
|
|
23
|
-
|
|
44
|
+
<hr>
|
|
24
|
-
|
|
45
|
+
<span>firstname familyname</span>
|
|
25
|
-
|
|
46
|
+
<button type="button" onclick="window.open('file/sample.html', '_blank')">
|
|
26
|
-
|
|
47
|
+
<i class="fa-solid fa-check fa-fw"></i> sample link text</button>
|
|
27
|
-
|
|
48
|
+
</figcaption>
|
|
28
|
-
|
|
49
|
+
</figure>
|
|
50
|
+
</li>
|
|
51
|
+
<li>
|
|
52
|
+
<figure>
|
|
53
|
+
<center><img src="images/sample.png"></center>
|
|
54
|
+
<figcaption>
|
|
55
|
+
<h3>ファーストネーム・<br>ファミリーネーム</h3>
|
|
56
|
+
<hr>
|
|
57
|
+
<span>firstname familyname</span>
|
|
58
|
+
<button type="button" onclick="window.open('file/sample.html', '_blank')">
|
|
59
|
+
<i class="fa-solid fa-check fa-fw"></i> sample link text</button>
|
|
60
|
+
</figcaption>
|
|
61
|
+
</figure>
|
|
62
|
+
</li>
|
|
63
|
+
<li>
|
|
64
|
+
<figure>
|
|
65
|
+
<center><img src="images/sample.png"></center>
|
|
66
|
+
<figcaption>
|
|
67
|
+
<h3>ファーストネーム・<br>ファミリーネーム</h3>
|
|
68
|
+
<hr>
|
|
69
|
+
<span>firstname familyname</span>
|
|
70
|
+
<button type="button" onclick="window.open('file/sample.html', '_blank')">
|
|
71
|
+
<i class="fa-solid fa-check fa-fw"></i> sample link text</button>
|
|
72
|
+
</figcaption>
|
|
73
|
+
</figure>
|
|
74
|
+
</li>
|
|
75
|
+
</ul>
|
|
29
76
|
```
|
|
30
77
|
|
|
78
|
+
### CSS（ ul / li ）
|
|
79
|
+
```CSS3
|
|
80
|
+
ul {
|
|
81
|
+
margin: auto;
|
|
82
|
+
display: flex;
|
|
83
|
+
flex-flow: row wrap;
|
|
84
|
+
place-content: space-between center;
|
|
85
|
+
list-style-type: none;
|
|
86
|
+
max-width: 1200px;
|
|
87
|
+
gap: 3rem;
|
|
88
|
+
}
|
|
89
|
+
@media screen and (min-width: 360px) { main li { width: 90%;}}
|
|
90
|
+
@media screen and (min-width: 960px) { main li { width: 255px;}}
|
|
91
|
+
```
|
|
92
|
+
|
|
31
|
-
### CSS（ figure / img ）
|
|
93
|
+
### CSS（ figure / img ）（修正済み）
|
|
32
94
|
```CSS3
|
|
33
95
|
img {
|
|
34
96
|
backface-visibility: hidden;
|
|
35
97
|
image-rendering: -webkit-optimize-contrast;
|
|
98
|
+
image-rendering: crisp-edges;
|
|
36
99
|
vertical-align: bottom;
|
|
37
100
|
}
|
|
101
|
+
figure, figure img, figure.hovered, figure.hovered img { transition: 1.1s; will-change: filter;}
|
|
38
102
|
figure {
|
|
39
103
|
background: #81A611;
|
|
40
104
|
margin: 0;
|
|
@@ -46,16 +110,14 @@
|
|
|
46
110
|
figure img {
|
|
47
111
|
width: 460px;
|
|
48
112
|
object-fit: cover;
|
|
49
|
-
object-position: center 10%;
|
|
50
|
-
filter: grayscale(100%);
|
|
113
|
+
filter: grayscale(100%);
|
|
51
|
-
transition: all 0.6s;
|
|
52
|
-
-webkit-transition: all 0.6s;
|
|
53
114
|
}
|
|
54
115
|
@media screen and (min-width: 360px) { figure img { height: 122px;}}
|
|
55
116
|
@media screen and (min-width: 960px) { figure img { height: 125px;}}
|
|
117
|
+
figure.hovered img { filter: grayscale(0);}
|
|
56
118
|
```
|
|
57
119
|
|
|
58
|
-
### CSS（ figcaption / button ）
|
|
120
|
+
### CSS（ figcaption / button ）（修正済み）
|
|
59
121
|
```CSS3
|
|
60
122
|
figcaption {
|
|
61
123
|
letter-spacing: 2.55px;
|
|
@@ -76,16 +138,33 @@
|
|
|
76
138
|
}
|
|
77
139
|
figcaption button {
|
|
78
140
|
cursor: help;
|
|
79
|
-
letter-spacing:
|
|
141
|
+
letter-spacing: 1.55px;
|
|
80
142
|
color: #FFF;
|
|
81
143
|
background: #000;
|
|
82
144
|
padding: 3px 8px 1px 7px;
|
|
83
|
-
transition:
|
|
145
|
+
transition: .65s;
|
|
84
146
|
position: absolute;
|
|
85
147
|
}
|
|
86
|
-
figcaption button:hover { color: #000; background: #
|
|
148
|
+
figcaption button:hover { color: #000; background: #FFF;}
|
|
87
|
-
figcaption button:hover + figure img { filter: none;}
|
|
88
149
|
@media screen and (min-width: 360px) { figcaption button { font-size: x-small; bottom: 1.55rem;}}
|
|
89
150
|
@media screen and (min-width: 960px) { figcaption button { font-size: small; bottom: 1.65rem;}}
|
|
90
151
|
```
|
|
91
152
|
|
|
153
|
+
### javascript
|
|
154
|
+
```javascript
|
|
155
|
+
buttonObserver();
|
|
156
|
+
|
|
157
|
+
function buttonObserver() {
|
|
158
|
+
const buttons = document.querySelectorAll('figcaption button');
|
|
159
|
+
buttons.forEach(button => {
|
|
160
|
+
const figure = button.closest('figure');
|
|
161
|
+
button.addEventListener('mouseenter', () => {
|
|
162
|
+
figure.classList.add('hovered');
|
|
163
|
+
});
|
|
164
|
+
button.addEventListener('mouseleave', () => {
|
|
165
|
+
figure.classList.remove('hovered');
|
|
166
|
+
});
|
|
167
|
+
});
|
|
168
|
+
}
|
|
169
|
+
```
|
|
170
|
+
|
1
当方の質問に修正依頼があった
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
**問題点**
|
|
1
|
+
**・問題点**
|
|
2
2
|
|
|
3
3
|
こちらのサイト様や他所や調べても、同様の症状らしきものにすら出会えず、とても困っております。
|
|
4
4
|
親要素となる<figure>内の<img>に対し、子孫要素である<button>をホバーすることで
|
|
@@ -8,6 +8,11 @@
|
|
|
8
8
|
ここまでコードを書いたのに……と諦め切れず、こちらで質問させて頂きました。
|
|
9
9
|
どうかご助力、ご回答のほど、何卒よろしくお願い致します。
|
|
10
10
|
（キャラクターリストのような物を制作しようと思っています）
|
|
11
|
+
|
|
12
|
+
**・追記**
|
|
13
|
+
|
|
14
|
+
CSSのみの実現や問題解決は困難、と回答者さんが判断された場合は
|
|
15
|
+
こちらの質問内容の実現を可能とするJavaScript、またはjQueryをお教え頂きたく存じます。
|
|
11
16
|
|
|
12
17
|
### HTML
|
|
13
18
|
```HTML
|