質問編集履歴

3

抜けていた情報がある

2022/04/10 06:57

投稿

dokoyakoko
dokoyakoko

score15

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)からの閲覧でのみ<button>を長押ししなければ
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

新しく問題が出てきた

2022/04/10 06:49

投稿

dokoyakoko
dokoyakoko

score15

test CHANGED
@@ -1 +1 @@
1
- figure(img)> figcaption(button) で button:hover したら figure > img を変化させたい
1
+ figure(img)> figcaption(button) で button:hover したら figureimg を変化させたい
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:none; に変化させたいのですが、
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
- <figure>
40
+ <figure>
20
- <center><img src="images/sample.png"></center>
41
+ <center><img src="images/sample.png"></center>
21
- <figcaption>
42
+ <figcaption>
22
- <h3>ファーストネーム・<br>ファミリーネーム</h3>
43
+ <h3>ファーストネーム・<br>ファミリーネーム</h3>
23
- <hr>
44
+ <hr>
24
- <span>firstname familyname</span>
45
+ <span>firstname familyname</span>
25
- <button href="#" target="_blank">
46
+ <button type="button" onclick="window.open('file/sample.html', '_blank')">
26
- <i class="fa-solid fa-check fa-fw"></i> sample link text</button>
47
+ <i class="fa-solid fa-check fa-fw"></i> sample link text</button>
27
- </figcaption>
48
+ </figcaption>
28
- </figure>
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: 2px;
141
+ letter-spacing: 1.55px;
80
142
  color: #FFF;
81
143
  background: #000;
82
144
  padding: 3px 8px 1px 7px;
83
- transition: 1s;
145
+ transition: .65s;
84
146
  position: absolute;
85
147
  }
86
- figcaption button:hover { color: #000; background: #81A611;}
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

当方の質問に修正依頼があった

2022/04/08 12:51

投稿

dokoyakoko
dokoyakoko

score15

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