Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie kann ich CSS verwenden, um Inhalte beim Hover dynamisch zu ändern und so ein interaktives Erlebnis für Benutzer zu schaffen?

Linda Hamilton
Freigeben: 2024-11-01 11:03:30
Original
284 Leute haben es durchsucht

How can I use CSS to dynamically change content on hover, creating an interactive experience for users?

Ändern von Inhalten beim Hover mit CSS

In der heutigen Webentwicklung sorgen dynamische Änderungen an Inhaltselementen für einen Hauch von Interaktivität und Attraktivität. Eine dieser häufigen Anforderungen ist die Aktualisierung des Inhalts eines Elements beim Bewegen des Mauszeigers. Obwohl dies trivial erscheinen mag, bietet CSS eine elegante Lösung.

Verwendung der CSS-Inhaltseigenschaft

Die CSS-Inhaltseigenschaft in Verbindung mit den Pseudoelementen ::after und ::before gibt Entwicklern mehr Möglichkeiten um den angezeigten Inhalt zu ändern. Durch die Verwendung dieser Elemente können wir einen nahtlosen Hover-Effekt erzeugen, der den Inhalt eines Zielelements ändert.

CSS-Regeln für den Hover-Status ändern

Um den gewünschten Hover-Effekt zu erzielen, fügen wir Folgendes hinzu Regel zu unserem CSS:

.item:hover a p.new-label::after {
  content: 'ADD';
}
Nach dem Login kopieren

Diese Regel weist den Browser an, „ADD“ an den Inhalt des Elements mit der Klasse „new-label“ anzuhängen, wenn es in einen Hover-Zustand wechselt.

Beispielimplementierung

Betrachten Sie das folgende Beispiel:

<code class="html"><div class="item">
  <a href="">
    <p class="label success new-label"><span>New</span></p>
  </a>
</div></code>
Nach dem Login kopieren
<code class="css">.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 mit der Maus über die Bezeichnung „NEU“ fahren, wechselt der Inhalt nahtlos zu „HINZUFÜGEN“, wodurch ein dynamischer Hover-Status ohne erstellt wird erfordert zusätzliches Scripting.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS verwenden, um Inhalte beim Hover dynamisch zu ändern und so ein interaktives Erlebnis für Benutzer zu schaffen?. 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