CSSのみを使用してホバー時にコンテンツを変更するにはどうすればよいですか?

ホバー時にコンテンツを変更する方法

はじめに

ホバー効果は、追加情報を提供したり、画面上の要素に注意を向けたりするために使用される一般的な手法です。ウェブページ。この記事では、CSS のみを使用して、マウス カーソルを要素の上に置いたときに要素のコンテンツを変更する、シンプルかつ効果的な方法を検討します。

問題ステートメント

目標は、「」のコンテンツを変更することです。マウス カーソルをその上に置くと、「NEW」ラベルが「ADD」に変わります。これは、JavaScript や追加ライブラリを使用せずに純粋に CSS を通じて実現する必要があります。

CSS Content Property to the Rescue

CSS content プロパティは、::after および ::before 擬似関数とともに導入されます。要素は、要素の内容を変更する方法を提供します。このプロパティを利用して問題を解決しましょう:

解決策

1. ホバー時に元のコンテンツを非表示にする:

<code class="css">.item:hover a p.new-label span {
  display: none;
}</code>

このルールは次の表示を使用します。 を非表示にする none プロパティマウス カーソルが .item 上にあるときに「NEW」コンテンツを含む要素。

2. ::after: を使用して新しいコンテンツを表示します。

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

element ::after は、ホバー状態にある .new-label 要素の後に「ADD」コンテンツを挿入するために使用されます。 content プロパティは、新しいコンテンツを指定します。

更新されたコード

<code class="css">body {
  font-family: Arial, Helvetica, sans-serif;
}

.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>

結論

content プロパティとホバー効果を組み合わせることで、シンプルでエレガントなソリューションを実装することに成功しました。純粋な CSS を使用してホバー時にコンテンツを変更します。この手法は広く適用可能であり、ユーザー インタラクションを強化し、動的かつ視覚的に魅力的な方法で追加情報を提供するために使用できます。

以上がCSSのみを使用してホバー時にコンテンツを変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。