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

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

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

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

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

Q&A

解決済

2回答

1693閲覧

【CSS / JavaScript】子要素にマウスオーバーしたら親要素の背景色を変更する方法

nasumi

総合スコア11

CSS3

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

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

0グッド

0クリップ

投稿2023/01/15 02:43

編集2023/01/15 17:42

前提

子要素にマウスオーバーしたら親要素の背景色を変更する方法を探しています。
cssのpointer-eventsプロパティを使用すれば簡単そうなのですが、いくつか躓く箇所があり質問した次第となります。
WordPressのテーマ作成における、メインループの中での処理になります。

実現したいこと

・(ソース参照).p-card__titleというクラスにホバーした際に、親要素の.p-card__boxの背景色を変更する

発生している問題・エラーメッセージ

この挙動を再現する上では、おそらく以下の方法になるかと思い、実装を試しています。

①cssのpointer-eventsプロパティを使用する
cssのpointer-eventsプロパティを使用した場合、一見うまくいくのですが、親要素の.p-card__boxにpointer-events: noneを指定することで、子要素となる<?php the_category(); ?>関数が吐き出すリンクつくカテゴリーも影響を受けてしまい、これらのカテゴリーリンクをクリックできなくなってしまう問題がある。

②jsのfor文やforEachなどで各要素を取得し、親要素の背景色を変更する
jsのforEach文で各.p-card__titleを取得して処理した場合、以下のエラーを吐き出します。
※この下に続く該当のソースコードを参照

js

1Uncaught TypeError: Cannot read properties of null (reading 'classList') 2 at HTMLParagraphElement.<anonymous> (main.js:23:42) 3(anonymous) @ main.js:23

該当のソースコード

php

1 <article class="p-card"> 2 <ul class="p-card__list"> 3 <?php if (have_posts()): ?> 4 <?php while (have_posts()) : the_post(); ?> 5 <li class="p-card__item"> 6 <a href="<?php the_permalink(); ?>"> 7 <div class="p-card__wrap"> 8 <?php 9 $thumbnail_url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); 10 $noimage_url = get_template_directory_uri() . '/assets/images/test/mv_01.png'; 11 ?> 12 <?php if ($thumbnail_url) : ?> 13 <div class="p-card__thumbnail" style="background-image: url( '<?php echo $thumbnail_url; ?>' );"></div> 14 <?php else : ?> 15 <div class="p-card__thumbnail" style="background-image: url( '<?php echo $noimage_url; ?>' );"></div> 16 <?php endif; ?> 17 </div> 18 </a> 19 20 <!-- ここからが該当箇所 --> 21 <div class="p-card__box"> 22 <div class="p-card__block"> 23 <?php the_category(); ?> 24 <p class="p-card__title"><a href="<?php the_permalink(); ?>"><?php echo wp_trim_words( get_the_title(), 40, '…' ); ?></a></p> 25 </div> 26 <p class="c-date p-card__date"><?php the_time('Y.m.d'); ?></p> 27 </div> 28 </li> 29 <?php endwhile; ?> 30 <?php endif; ?> 31 </ul> 32 </article>

css

1// pointer-eventsを使った方の書き方 2.p-card { 3 width: 760px; 4} 5.p-card__list { 6 display: grid; 7 grid-template-columns: repeat(2, 360px); 8 gap: 40px; 9} 10.p-card__wrap { 11 overflow: hidden; 12 border-radius: 10px 10px 0 0; 13} 14@media (hover: hover) { 15 .p-card__wrap:hover .p-card__thumbnail { 16 -webkit-transform: scale(1.1); 17 transform: scale(1.1); 18 } 19} 20.p-card__thumbnail { 21 background-repeat: no-repeat; 22 background-size: cover; 23 aspect-ratio: 12/7; 24 -webkit-transition: 0.3s; 25 transition: 0.3s; 26} 27.p-card__box { 28 display: grid; 29 -ms-flex-line-pack: justify; 30 align-content: space-between; 31 min-height: 190px; 32 padding: 20px 16px 16px; 33 border-radius: 0 0 10px 10px; 34 background-color: #ecf7e4; 35 -webkit-transition: 0.3s; 36 transition: 0.3s; 37 pointer-events: none; 38} 39@media (hover: hover) { 40 .p-card__box:hover { 41 background-color: #d2edde; 42 } 43} 44.p-card__title { 45 display: inline-block; 46 margin-top: 16px; 47 font-weight: 500; 48 font-size: 1.8rem; 49 line-height: 1.6; 50 -webkit-transition: 0.3s; 51 transition: 0.3s; 52 pointer-events: auto; 53} 54@media (hover: hover) { 55 .p-card__title:hover { 56 color: #094; 57 } 58} 59.p-card__date { 60 margin-top: 16px; 61}

css

1// jsでactiveクラスを付ける方のやり方(該当箇所以外は省略) 2 3.p-card__box { 4 display: grid; 5 -ms-flex-line-pack: justify; 6 align-content: space-between; 7 min-height: 190px; 8 padding: 20px 16px 16px; 9 border-radius: 0 0 10px 10px; 10 background-color: #ecf7e4; 11 -webkit-transition: 0.3s; 12 transition: 0.3s; 13} 14.p-card__box.active { 15 background-color: #d2edde; 16} 17.p-card__title { 18 display: inline-block; 19 margin-top: 16px; 20 font-weight: 500; 21 font-size: 1.8rem; 22 line-height: 1.6; 23 -webkit-transition: 0.3s; 24 transition: 0.3s; 25} 26@media (hover: hover) { 27 .p-card__title:hover { 28 color: #094; 29 } 30} 31

js

1const cardTitleSet = document.querySelectorAll(".p-card__title"); 2const cardTitles = Array.prototype.slice.call(cardTitleSet); 3cardTitles.forEach((element) => { 4 element.addEventListener("mouseover", () => { 5 element.querySelector(".p-card__box").classList.add("active"); 6 }); 7 element.addEventListener("mouseleave", () => { 8 element.querySelector(".p-card__box").classList.remove("active"); 9 }); 10

試したこと

cssのpointer-eventsプロパティで対応する方は<?php the_category(); ?>が吐き出すhtmlに対してpointer-events: auto等を指定してみたが、効かず。さらに現状のhtmlの構造を変更することで、どうにかごまかせないか試していたが、やはり構造はこのままでないとデザインが崩れると判断した。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

JSでの解決法は既に出ているので、CSSのみで実装する方法を。

:has疑似要素を使います。

css

1@media (hover: hover) { 2 .p-card__title:hover > a { 3 color: #094; 4 } 5 .p-card__box:has(.p-card__title:hover) { 6 background-color: #d2edde; 7 } 8}

Firefoxはまだ非対応なので注意が必要です。

CSSの:has()疑似クラスの便利な使い方のまとめ | コリス

投稿2023/01/15 06:46

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nasumi

2023/01/15 08:42 編集

ありがとうございます!なるほどhasクラスがありましたか、、、 無事このやり方でも実装することができました。 感謝いたします。 悩みましたが、Firefoxのことを考慮しjsでの実装方法の方をベストアンサーとさせていただきました。 ありがとうございました。
guest

0

ベストアンサー

element.querySelector(".p-card__box").classList.add("active");

.p-card__title である element の子孫に .p-card__box の要素は存在しないので、querySelector()null を返します。やりたいことは element.closest(".p-card__box").classList.〜 ではないでしょうか。

投稿2023/01/15 06:30

int32_t

総合スコア20659

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nasumi

2023/01/15 08:42

回答ありがとうございます。 無事実装することができました。nullが出た原因はご指摘の通り、要素が存在しないこととこの解答で気づくことができました。 感謝申し上げます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問