アイテムリストのテキストの色をマウスオーバー時に変更する

この記事では、テキストの色を変更する方法を紹介します。 アイテムリスト GemPagesで訪問者がアイテムにカーソルを合わせたときに表示される。

アイテムリスト要素について

その アイテムリスト GemPagesの要素を使用すると、アイコンとテキスト付きのアイテムリストを表示できます。これは、製品のメリット、ストアポリシー、サービスの特徴などを強調するのに役立ちます。

この要素について初めて学ぶ場合は、ガイドで詳細をご確認いただけます。こちら.

デフォルトでは、商品リストのテキストは、顧客がマウスカーソルを重ねても通常は同じ色のままです。よりインタラクティブな効果を生み出したり、重要なコンテンツを目立たせたい場合は、CSSを使用してカスタムのホバーカラーを適用できます。

GemPagesエディタで、 アイテムリスト カスタマイズしたい要素。

その後、 アイテムリスト要素を右クリックします をクリックして カスタムコード.

以下のCSSコードを「カスタムコード」ボックスに貼り付けてください。

.gXogrronUE .gp-icon-list-text:hover {

  色：＃FF3126;

}

上記のコードでは、 .gXogrronUE これは、特定のアイテムリスト要素のクラスセレクタです。

それを、ご自身のアイテムリスト要素の実際のクラスに置き換える必要があります。

したがって、最終的なコードは以下の構造に従う必要があります。

.your-element-class .gp-icon-list-text:hover {

  色：＃FF3126;

}

無料のカラーピッカーツールを使ってカラーコードを探すことができます。例えば、以下のようなツールがあります。