css hoverによる背景画像差し替えで動作しないケースがあった場合の対処法 

目次 

1．はじめに 

2．css hoverとは 

3． css hoverによる背景画像を差し替える書き方 

はじめに

突然ですが、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