目次
はじめに
突然ですが、css hoverによる背景画像差し替えはどのようにしていますか？
実は書き方によっては、エラー表示されていなくても、iPhone14ProMax（iOS17.1.1）で表示されない場合がありました。そこで以下に、css hoverによる背景画像差し替えについて掘り下げてみましょう。
css hoverとは
hoverはマウスが要素の上に乗っている状態（スマホであればタップ）の要素に限定しCSSを適用する擬似クラスです。擬似クラスとはHTMLのある特定の状態を指定して適用するセレクタの事を言います。
hoverは画像、テキストなど様々なHTML要素に活用されます。URLの上にマウスを置くと、色が変わるというのは体験したことがあると思います。そのような効果にhoverは使われています。
例) css hoverの書き方
a:hover {
color: blue;
}
css hoverによる背景画像を差し替える書き方
さてここから、本題です。
以下、css hoverによる背景画像を差し替える書き方です。
/*—————
今回使用した実装環境
WordPressバージョン6.3.2
WordPressテーマ・バージョン：Twenty Twenty-three Child ・1.1
—————–*/
.example {
background-image: url(example1.png);
}
.example:hover {
background-image: url(example2.png);
}
一見、正しいように思える上に、検証ツールでもエラー表示されないため、どのデバイスでも問題なく表示されるように思います。
しかし、他のデバイスでは表示されているのにもかかわらず、いざiPhone14ProMax （iOS17.1.1）で確認すると、背景画像が反映されていませんでした。OSによるものかとも思いましたが、同じiPadの同バージョンでは表示されています。
このようなことが発生した場合の対処法として、別の方法をお伝えします。
/*—————
今回使用した実装環境
WordPressバージョン6.3.2
WordPressテーマ・バージョン：Twenty Twenty-three Child ・1.1
—————–*/.example::before {
content:””;
background-image: url(example1.png);
}.example:hover::before {
content:””;
background-image: url(example2.png);
}
「.example」要素本体に背景画像を設置するのではなく、「before」や「after」などの疑似要素に背景画像を設置することで、css hoverによる背景画像差し替えが反映されます。
擬似要素とは、HTMLの要素を擬似的にCSSで設定できるものです。HTMLでは書くことができない、要素の装飾などをしたいときなどによく使われています。
ちなみに、「::before」「::after」の疑似要素を設置する場合は、プロパティとして「content:””;」を書かなければ、サイトに反映されません。
今回使用した実装環境
・Wordpressバージョン6.3.2
・Wordpressテーマ・バージョン：Twenty Twenty-three ・1.1
Ina
