CSS ::after 擬似要素を使用してホバー時にコンテンツを動的に変更する方法

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

ホバー時に要素のコンテンツを変更することは、Web 開発における一般的なタスクです。これは簡単なプロセスだと思うかもしれませんが、::after や ::before などの疑似要素とともに、CSS コンテンツのプロパティをより深く理解する必要があります。

この例では、目標は変更することです。カーソルを置くと、「NEW」ラベルのコンテンツが「ADD」に変わります。最初は、content プロパティを使用してこの問題に対処しましたが、問題が発生しました。幸いなことに、望ましい効果を達成するための賢い解決策が存在します。

その秘訣は、content プロパティと ::after 疑似要素を組み合わせることにあります。

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

この CSS ルールは、p をターゲットとしています。ホバー状態にある場合、「item」クラス内の「a」タグ内にクラス「new-label」を持つ要素。次に、既存のコンテンツを「ADD」に動的に置き換えます。

説明のために、更新された例を次に示します。

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

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

ここで、「NEW」ラベルの上にカーソルを置くと、これはシームレスに「ADD」に変換され、最初の要件を満たします。

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