質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

受付中

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

dokoyakoko
dokoyakoko

総合スコア15

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

-1評価

0クリップ

239閲覧

投稿2022/04/08 07:28

編集2022/04/10 06:57

新たな問題点(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'); }); }); }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

arcxor

2022/04/08 08:26

期待する結果(実現したいこと)は何ですか?JavaScript を使わず CSS のみで実現したいのですか?
dokoyakoko

2022/04/08 08:57

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

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。