CSS を使用してホバー時にコンテンツを動的に変更し、ユーザーにインタラクティブなエクスペリエンスを提供するにはどうすればよいですか?

CSS を使用したホバー時のコンテンツの変更

今日の Web 開発では、コンテンツ要素への動的な変更により、インタラクティブ性と魅力が追加されます。このような一般的な要件の 1 つは、ホバー時に要素のコンテンツを更新することです。これは些細なことのように思えるかもしれませんが、CSS は洗練されたソリューションを提供します。

CSS コンテンツ プロパティの使用

CSS コンテンツ プロパティを ::after および ::before 疑似要素と組み合わせると、開発者は強力になります。表示内容を変更します。これらの要素を利用することで、対象の要素のコンテンツを変更するシームレスなホバー効果を作成できます。

ホバー状態の CSS ルールを変更する

目的のホバー効果を実現するには、次のコードを追加します。 CSS へのルール:

.item:hover a p.new-label::after {
  content: 'ADD';
}

このルールは、ホバー状態に入ったときにクラス 'new-label' を持つ要素のコンテンツに 'ADD' を追加するようにブラウザに指示します。

実装例

次の例を考えてみましょう:

<code class="html"><div class="item">
  <a href="">
    <p class="label success new-label"><span>New</span></p>
  </a>
</div></code>

<code class="css">.item {
  width: 30px;
}

a {
  text-decoration: none;
}

.label {
  padding: 1px 3px 2px;
  font-size: 9.75px;
  font-weight: bold;
  color: #ffffff;
  text-transform: uppercase;
  white-space: nowrap;
  background-color: #bfbfbf;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-decoration: none;
}

.label.success {
  background-color: #46a546;
}

.item a p.new-label span {
  position: relative;
  content: 'NEW';
}

.item:hover a p.new-label span {
  display: none;
}

.item:hover a p.new-label::after {
  content: 'ADD';
}</code>

「NEW」ラベルの上にマウスを置くと、コンテンツはシームレスに「ADD」に遷移し、何もせずに動的なホバー状態を作成します。追加のスクリプトが必要です。

以上がCSS を使用してホバー時にコンテンツを動的に変更し、ユーザーにインタラクティブなエクスペリエンスを提供するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。