CSS のみを使用してホバー時にコンテンツを動的に変更する方法

CSS を使用してホバー上のコンテンツを変更する方法

CSS のみを使用してホバー上のコンテンツを変更するには、content プロパティと::after または ::before 擬似要素。

この例では、要素にマウスを置いたときにテキスト「NEW」を「ADD」に変更することが目的です。これを実現するには、次の CSS を追加します:

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

説明:

• .item:hover: item 要素のホバー効果をトリガーします。
• a p.new-label: アンカー タグ内のクラス new-label を持つ段落を選択します。
• :after: 付加された要素の後にコンテンツを表示する疑似要素を作成します。 to.
• content: 'ADD': 疑似要素の後に表示されるコンテンツを定義します。

項目にカーソルを置くと、:after 疑似要素がトリガーされますとなり、内容が「ADD」に変更されます。元の「NEW」テキストは別の CSS ルールを使用して非表示になります:

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

このアプローチにより、JavaScript に依存せずに CSS を使用してホバー時に要素のコンテンツを動的に変更できます。

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