Wie ändere ich Inhalte beim Hover mithilfe von CSS ::after Pseudo-Element dynamisch?

So ändern Sie Inhalte beim Hover mit CSS

Das Ändern des Inhalts eines Elements beim Hover ist eine häufige Aufgabe in der Webentwicklung. Auch wenn Sie vielleicht denken, dass es sich um einen unkomplizierten Prozess handelt, erfordert er ein tieferes Verständnis der CSS-Inhaltseigenschaften und ihrer Pseudoelemente wie ::after und ::before.

In Ihrem Beispiel besteht das Ziel darin, Änderungen vorzunehmen Der Inhalt des Etiketts „NEU“ wird zu „HINZUFÜGEN“ angezeigt, wenn Sie mit der Maus darüber fahren. Ursprünglich haben Sie dieses Problem gelöst, indem Sie versucht haben, die Content-Eigenschaft zu verwenden, sind dabei aber auf Schwierigkeiten gestoßen. Glücklicherweise gibt es eine clevere Lösung, um den gewünschten Effekt zu erzielen.

Der Trick besteht darin, die Content-Eigenschaft mit dem ::after-Pseudoelement zu kombinieren:

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

Diese CSS-Regel zielt auf das p ab Element mit der Klasse „new-label“ innerhalb eines „a“-Tags innerhalb der „item“-Klasse, wenn es sich im Hover-Zustand befindet. Anschließend wird der vorhandene Inhalt dynamisch durch „HINZUFÜGEN“ ersetzt.

Zur Veranschaulichung hier ein aktualisiertes Beispiel:

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

Wenn Sie nun mit der Maus über die Bezeichnung „NEU“ fahren, wird Folgendes angezeigt: es verwandelt sich nahtlos in „ADD“ und erfüllt Ihre ursprüngliche Anforderung.

Das obige ist der detaillierte Inhalt vonWie ändere ich Inhalte beim Hover mithilfe von CSS ::after Pseudo-Element dynamisch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!