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

Ä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';
}

Diese Regel weist den Browser an, „ADD“ an den Inhalt des Elements mit der Klasse „new-label“ anzuhängen, wenn es aktiviert ist geht in einen Schwebezustand über.

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>

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

Wenn Sie mit der Maus über die Bezeichnung „NEU“ fahren, wechselt der Inhalt nahtlos zu „ADD“, wodurch ein dynamischer Hover-Status erstellt wird, ohne dass zusätzliche Skripte erforderlich sind.

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!