この記事は、WordPressのCocoonテーマで発生する、擬似クラスの:hover(以下、hover)で設定した背景色が少し白く濁って表示される問題をまとめた記事です。以前に、hoverのプロパティに背景色を変更する設定を加えましたが、設定した背景色よりも薄くなってしまうことがありました。この問題は、hoverのCSSプロパティにopacityを追加したところ解決したので、詳細をまとめていきたいと思います。
私のブログ環境
私がこの問題を経験したときのブログの環境は、以下の通りになっております。
- プラットフォーム：WordPress
- テーマ：Cocoon
- サーバー：さくらのレンタルサーバー
マウスオーバーで背景色が薄くなる問題発生
hoverを設定してカーソルを要素に合わせてみると、背景色が少し白く濁って表示される問題が発生しました。
hoverとは、ユーザーが要素にカーソルを合わせたとき（マウスオーバー）に発動する擬似クラスです。また、タブレットやスマホでは、要素をタッチするか長押しすることで発動します。
この機能を使うことで、比較的難しいJavaScriptを使わなくても、サイトにちょっとした動きのあるデザインに仕上げることができます。
このような手軽さもあり、多くのユーザーが使っているCSSですが、私は以前にボタンをデザインしようとして背景色を適用したところ、背景色が少し白く濁ってしまう問題に当たりました。
CSSプロパティにopacityを追加したところ解決
この問題の解決策として、hoverのプロパティにopacity: 1;を追加することで、設定した背景色がしっかりと表示されるようになりました。
opacityとは、要素の透明度を制御するCSSプロパティです。このプロパティは、0から1の範囲で指定でき、１に近づくほど不透明になっていきます。
以下のコードは、Cocoonの親テーマで使用されている一例です。
.btn:hover, .ranking-item-link-buttons a:hover,
.btn-wrap > a:hover {
opacity: 0.7;
color: var(--cocoon-white-color);
}
見てみると、opacityが0.7に設定されていることが分かります（2024年10月8日現在）。この影響で、Cocoonの子テーマを利用していると、親テーマのコードが読み込まれるので、マウスオーバーすると背景が半透明（0.7）になります。
原因が分かったので、opacityを設定前(opacity:0.7)と設定後(opacity:1)を比べてみて確認していきましょう。
設定前
CSS
.btn-before a{
background-color: #1b4f00;
}
.btn-before a:hover{
background-color: #000;
opacity: 0.7;
}
設定後
CSS
.btn-after a{
background-color: #1b4f00;
}
.btn-after a:hover{
background-color: #000;
opacity: 1;
}
このようにopacityを1にすることで、白く濁ったり半透明になったりすることなく、設定した背景色を表示することができました。
※親テーマからCSSを読み込んでいるはずなのに、設定前のCSSにわざわざ0.7のopacityプロパティを加えている理由は、将来的に何か変更があったときに、上記の比較が機能しなくなってしまうので、見かけ上の都合からopacityプロパティを加えている次第です。
まとめ
- マウスオーバーで背景色が薄くなる問題が発生
- hoverを設定してカーソルを要素に合わせてみると、背景色が少し白く濁って表示される問題が発生
- CSSプロパティにopacityを追加したところ解決
- hoverのプロパティにopacity: 1;を追加することで、設定した背景色がしっかりと表示されるようになった
これまで見ていただきありがとうございました！