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

新たな問題点（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（修正済み）

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 ）

CSS3
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 ）（修正済み）

CSS3
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 ）（修正済み）

CSS3
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

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');
        });
      });
    }