Wie ändere ich Inhalte beim Hover dynamisch, indem ich nur CSS verwende?

So ändern Sie Inhalte beim Hover mit CSS

Um den Inhalt beim Hover nur mit CSS zu ändern, können Sie die Content-Eigenschaft zusammen mit verwenden die Pseudoelemente ::after oder ::before.

Im bereitgestellten Beispiel besteht das Ziel darin, den Text „NEW“ in „ADD“ zu ändern, wenn die Das Element wird mit der Maus darüber bewegt. Um dies zu erreichen, fügen Sie das folgende CSS hinzu:

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

Erläuterung:

• .item:hover: Löst den Hover-Effekt auf dem Elementelement aus.
• a p.new-label: Wählt den Absatz mit der Klasse new-label im Anker aus Tag.
• :after: Erstellt ein Pseudoelement, das den Inhalt nach dem Element anzeigt, an das es angehängt ist.
• content: 'ADD': Definiert den Inhalt, der nach dem Pseudoelement angezeigt werden soll. Element.

Wenn der Mauszeiger über das Element bewegt wird, wird das :after-Pseudoelement ausgelöst und der Inhalt wird in „ADD“ geändert. Der ursprüngliche „NEU“-Text wird mithilfe einer anderen CSS-Regel ausgeblendet:

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

Mit diesem Ansatz können Sie den Inhalt eines Elements beim Hover mithilfe von CSS dynamisch ändern, ohne auf JavaScript angewiesen zu sein.

Das obige ist der detaillierte Inhalt vonWie ändere ich Inhalte beim Hover dynamisch, indem ich nur CSS verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!