Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Patricia Arquette
Freigeben: 2024-10-30 00:43:02
Original
315 Leute haben es durchsucht

How to Dynamically Change Content on Hover Using CSS ::after Pseudo-element?

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren
<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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!