ホームページ  >  記事  >  CMS チュートリアル  >  ワードプレスでマウスをテキストの上に移動すると色が変わるようにする方法

ワードプレスでマウスをテキストの上に移動すると色が変わるようにする方法

下次还敢
下次还敢オリジナル
2024-04-15 17:27:15388ブラウズ

カスタム CSS を追加することで、WordPress でホバー時のテキストの色を変更できます。ダッシュボードにログインし、[外観] > [カスタマイズ] > [追加 CSS] に移動します。次の CSS コードを追加します: a:hover {color: #ff0000;}。 #ff0000 を目的の 16 進カラー コードに変更します (例: 青の場合は #0000ff)。変更を保存し、キャッシュをクリアして (有効な場合)、変更を有効にします。

ワードプレスでマウスをテキストの上に移動すると色が変わるようにする方法

WordPress でホバー時にテキストの色を変更する方法

WordPress では、次の方法でテキストにテキストを簡単に追加できます。 CSS テキストの上にマウスを置くと色が変わります。ステップバイステップの手順は次のとおりです。

ステップ 1: カスタム CSS を追加します

  • WordPress ダッシュボードにログインします。
  • [外観] > [カスタマイズ] に移動します。
  • サイドバーで、「CSS を添付」をクリックします。

ステップ 2: CSS コードを記述する

  • 表示されたテキスト ボックスに、次の CSS コードを追加します:
<code class="css">a:hover {
  color: #ff0000; /* 将悬停文本颜色更改为红色 */
}</code>

ステップ 3: ホバーの色を変更する (オプション)

  • 必要に応じてホバーの色を変更できます。 #ff0000 (赤) を希望の 16 進カラー コードに置き換えるだけです。たとえば、青色のテキストの場合は、#0000ff を使用します。

動作原理:

上記の CSS は、:hover 疑似クラスを使用しています。これは、マウスが上にあるときに機能します。要素 (この場合、スタイルはテキストリンクが含まれているときに適用されます)。 color プロパティは、ホバー時にテキストの色を変更します。

注:

  • CSS をアクティブなテーマのカスタム CSS セクションに必ず追加してください。
  • このコードはすべてのテキスト リンクに影響します。特定のテキストにのみ色の変更を適用したい場合は、適切な CSS セレクターを使用します。
  • 変更を有効にするには、キャッシュをクリアします (有効な場合)。

以上がワードプレスでマウスをテキストの上に移動すると色が変わるようにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。