インラインCSSでホバーエフェクトを書きたいですか？ CSS変数を使用します。

最近、私は各投稿が性格を高めるためのユニークな色を誇るブログを作りました。著者は、作成後にCMS内でこの色を選択します。これは、アートの方向性の微妙なタッチです。

この色をフロントエンドに表示するために、最初に値を直接インラインスタイルの属性に直接埋め込みました<article></article>要素。私のテンプレートは液体を使用しましたが、アプローチは他のテンプレート言語では似ています。

 {投稿の投稿の％％}
<h1 id="post-title">{{post.title}}</h1>
  {{コンテンツ}}
{％endfor％}

これはうまくいきました。ただし、カスタムカラーがホバーにのみ表示されることを望んでいました。ホバースタイルをスタイル属性に直接追加することはできないため、最初にこれを試しました。

記事 {
  背景：LightGray！重要。
}
記事：ホバー{
  /*機能しません！ */
  背景：継承;
}

!importantはインラインスタイルを無効にしますが、ホバーでこれを逆転させる方法はありません。

私のソリューションでは、スタイル属性を使用してCMSから色を取得しましたが、直接適用する代わりにCSS変数として保存します。

<h1 id="post-title"> {{post.title}}</h1>
  {{コンテンツ}}

この変数は、標準のCSSのホバースタイルを定義するために使用されます。

記事 {
  背景：LightGray;
}
記事：ホバー{
  /*動作！ */
  背景：var（ -  custom_color）;
}

色がCSS変数になったので、その使用を拡大できます。たとえば、カスタムカラーを使用して、投稿内のすべてのリンクをスタイリングできます。

記事a {
  色：var（ -  custom_color）;
}

変数のスコープはに制限されています<article></article>要素、他の場所での紛争を防ぐ。ユニークな色の複数の投稿は、同じページに共存できます。

CSS変数サポートは、Internet Explorerを除く、ほとんどの最新のブラウザで優れています。この手法は、軽量のCMSアートの方向性に便利であり、CSS変数のパワーを紹介します。

以上がインラインCSSでホバーエフェクトを書きたいですか？ CSS変数を使用します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。