figure（img）> figcaption（button） で button:hover したら figure（img） を変化させたい

Question

新たな問題点（2022/04/10-）

<button>の記述が誤っていたことに気付き、以下の HTML に変更したところ、
PC（Windows+chrome）からの閲覧や動作ではまったく問題の無い javascript が
スマホ（android+chrome）からの閲覧でのみ<button>を長押しする、もしくは
onclick後で無ければ filter: grayscale(0); に変化しない、という問題が発生致しました。
ワンタップでもホバー判定はされるものの、filter: grayscale(100%); が変わらず、
上記の長押し～onclick後に遅れて filter: grayscale(0); となります。

javascript 内に touchstart などを加筆するといった自力解決に努めましたが、
スマホ閲覧での不具合を直すことが出来ません。
どのように記載を修正すれば、スマホ閲覧でも<button>を長押しせずに
filter: grayscale(0); に変化させられるか、
どうかご助力、ご回答のほど、何卒よろしくお願い致します。

元々記載していた HTML・CSS には 2022/04/08 時点とは違う変更点がある為、
修正済みとして現状のものに差し替え、一部追加させていただきました。

---

元々の問題点（2022/04/08時点）

こちらのサイト様や他所や調べても、同様の症状らしきものにすら出会えず、とても困っております。
親要素となる<figure>内の<img>に対し、子孫要素である<button>をホバーすることで
<img>に仕込んでいた filter: grayscale(100%); を filter: grayscale(0); に変化させたいのですが、
本当にうんともすんとも……。
それと「子孫要素から親要素に影響を与えることは出来ない」という記事も見かけたものの、
ここまでコードを書いたのに……と諦め切れず、こちらで質問させて頂きました。
（キャラクターリストのような複数横並びのものを制作しようと思っています）

追記（2022/04/08時点）

CSSのみの実現や問題解決は困難、と回答者さんが判断された場合は
こちらの質問内容の実現を可能とするJavaScript、またはjQueryをお教え頂きたく存じます。

---

HTML（修正済み）

      <ul>
       <li>
         <figure>
           <center><img src="images/sample.png"></center>
           <figcaption>
             <h3>ファーストネーム・<br>ファミリーネーム</h3>
             <hr>
             <span>firstname familyname</span>
             <button type="button" onclick="window.open('file/sample.html', '_blank')">
               <i class="fa-solid fa-check fa-fw"></i> sample link text</button>
           </figcaption>
         </figure>
       </li>
       <li>
         <figure>
           <center><img src="images/sample.png"></center>
           <figcaption>
             <h3>ファーストネーム・<br>ファミリーネーム</h3>
             <hr>
             <span>firstname familyname</span>
             <button type="button" onclick="window.open('file/sample.html', '_blank')">
               <i class="fa-solid fa-check fa-fw"></i> sample link text</button>
           </figcaption>
         </figure>
       </li>
       <li>
         <figure>
           <center><img src="images/sample.png"></center>
           <figcaption>
             <h3>ファーストネーム・<br>ファミリーネーム</h3>
             <hr>
             <span>firstname familyname</span>
             <button type="button" onclick="window.open('file/sample.html', '_blank')">
               <i class="fa-solid fa-check fa-fw"></i> sample link text</button>
           </figcaption>
         </figure>
       </li>
      </ul>

CSS（ ul / li ）

ul {
margin: auto;
display: flex;
flex-flow: row wrap;
place-content: space-between center;
list-style-type: none;
max-width: 1200px;
gap: 3rem;
}
@media screen and (min-width: 360px) { main li { width: 90%;}}
@media screen and (min-width: 960px) { main li { width: 255px;}}

CSS（ figure / img ）（修正済み）

img {
backface-visibility: hidden;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
vertical-align: bottom;
}
figure, figure img, figure.hovered, figure.hovered img { transition: 1.1s; will-change: filter;}
figure {
background: #81A611;
margin: 0;
width: 255px;
overflow: hidden;
box-sizing: border-box;
display: block;
}
figure img {
width: 460px;
object-fit: cover;
filter: grayscale(100%);
}
@media screen and (min-width: 360px) { figure img { height: 122px;}}
@media screen and (min-width: 960px) { figure img { height: 125px;}}
figure.hovered img { filter: grayscale(0);}

CSS（ figcaption / button ）（修正済み）

figcaption {
letter-spacing: 2.55px;
line-height: 1.55;
color: #000;
background: #FFF;
position: relative;
}
@media screen and (min-width: 360px) { figcaption { padding: 1.55rem; height: 200px;}}
@media screen and (min-width: 960px) { figcaption { padding: 1.65rem 1.55rem; height: 215px;}}
figcaption span { font-size: x-small; text-transform: uppercase; display: block;}
figcaption hr {
margin: 1.05rem 0 1.3rem;
padding: 0;
border-top: solid thin;
height: 0;
opacity: 0.45;
}
figcaption button {
cursor: help;
letter-spacing: 1.55px;
color: #FFF;
background: #000;
padding: 3px 8px 1px 7px;
transition: .65s;
position: absolute;
}
figcaption button:hover { color: #000; background: #FFF;}
@media screen and (min-width: 360px) { figcaption button { font-size: x-small; bottom: 1.55rem;}}
@media screen and (min-width: 960px) { figcaption button { font-size: small; bottom: 1.65rem;}}

javascript

buttonObserver();
    
    function buttonObserver() {
      const buttons = document.querySelectorAll('figcaption button');
      buttons.forEach(button => {
        const figure = button.closest('figure');
        button.addEventListener('mouseenter', () => {
          figure.classList.add('hovered');
        });
        button.addEventListener('mouseleave', () => {
          figure.classList.remove('hovered');
        });
      });
    }

Comments

[arcxor]

期待する結果（実現したいこと）は何ですか？JavaScript を使わず CSS のみで実現したいのですか？

[dokoyakoko]

大切な情報を欠如させたまま質問を投稿してしまい、申し訳ございません。
当方の質問内容が「CSSのみの実現や解決は困難」という事でありましたら、
実現を可能とするJavaScriptをお教え頂きたく存じます。

よろしくお願い致します。

Answer 1

色々書かれている CSS の意味が理解できていませんが、button の hover 時に figure へ class 名を付与する JavaScript を書く必要があります。

buttonObserver();

function buttonObserver() {
  const button = document.querySelector('figcaption button');
  const figure = button.closest('figure');

  button.addEventListener('mouseenter', () => {
    figure.classList.add('hovered');
  });
  button.addEventListener('mouseleave', () => {
    figure.classList.remove('hovered');
  });
}

• https://codepen.io/arcxor/pen/abEGyGJ

---

CSS だけで実現するには :has 疑似クラスを用いる必要がありますが、:has 疑似クラスは多くのブラウザで実装されていません。

• https://caniuse.com/css-has

Comments

[dokoyakoko]

arcxorさん、ご回答ありがとうございます。
有難くもご提案頂いたJavaScriptですが、例えば<figure>~<figure>を包み込んだ<ul>の
display:flex; などで複数並べた状態だと、最も先頭（１番目）の<img>にのみ適応され、
２番目の<img>からは button:hover; しても全て無反応となってしまっています。
（当方のCSSに追加して頂いた部分もきちんとCSS内に追記しております）

少しでも問題解決へ前進できたことを嬉しく思っています。
よろしければ、引き続きよろしくお願い致したく存じます。

[arcxor]

期待する結果（実現したいこと）は何ですか？と問うたように、質問文に要件を全て書くようにしてください。

複数の figure に対応したバージョンです。
https://codepen.io/arcxor/pen/mdpLprp

[dokoyakoko]

引き続いてのご回答、および複数対応について誠に有難うございます。
追記してくださった ul 部分は既に自身のソースコードにございますので、お手数をお掛けして申し訳ありません。
複数対応後のご回答を頂く前から、ご提案くださったJavaScriptの「querySelector」を「querySelectorAll」へ
適査書き変えたりしましたが、スーパーリロードをしてもソース表示をして確かめても、自身で確実に書いた
「querySelectorAll」の効果は全くありませんでした。
arcxorさんの複数対応後のJavaScriptの「querySelectorAll」はきちんと効果が出てくださり、とても嬉しいです！

また、現在の学業カリキュラムとして採用されているプログラミング授業において、その修学者たちがネット上に
フリー配布されているソースコードの盗作や無断転載をして、学内で自作発言をするケースが目立ってきています。
その為、arcxorさんが要求する「要所」をあれ以上記載することは出来ません。
今回の質問内容は当方のソースコード全体（すでにul~liも記述を終了させた状態）から、
今回の問題点の必要箇所のみを限定的かつシンプルに抜粋したものです。
このような、すぐに埋もれるであろう些細な質問内容であったとしても、<figure>~</figure>以上の先祖要素に
近い部分までこちらで開示することは私的なリスクとして危惧し、正当性をもって事前に回避させて頂きました。
自身で組み上げたソースコードの完全な私物化は有り得ないと完璧に認めておりますが、上記のような不確定性の
多い学業環境からの安全確保のため、何卒ご理解のほどをお願い致します。

この度は問題解決に沢山ご尽力くださり、本当に有難うございました。
arcxorさんのお陰で自分だけでは不可能だった問題解決に至ることが叶いました。
こちらの上記を憂慮し過ぎたための情報不足による複数対応のお願いにおきましては大変ご不快な思いをさせて
しまったかと思われますが、それでもご助力には心の底から御礼を申し上げたく。
それでは、失礼致します。