Wie ändere ich Inhalte beim Hover nur mit CSS?

So ändern Sie Inhalte beim Hover

Einführung

Hover-Effekte sind eine gängige Technik, die verwendet wird, um zusätzliche Informationen bereitzustellen oder die Aufmerksamkeit auf ein Element auf einem zu lenken Webseite. In diesem Artikel wird eine einfache, aber effektive Methode zum Ändern des Inhalts eines Elements untersucht, wenn der Mauszeiger nur mit CSS darüber schwebt.

Problemstellung

Das Ziel besteht darin, den Inhalt des „Elements“ zu ändern. „NEU“ in „HINZUFÜGEN“ umwandeln, wenn der Mauszeiger darüber schwebt. Dies sollte rein durch CSS erreicht werden, ohne JavaScript oder zusätzliche Bibliotheken zu verwenden.

CSS-Inhaltseigenschaft zur Rettung

Die CSS-Inhaltseigenschaft, eingeführt zusammen mit ::after und ::before pseudo- Elemente bietet eine Möglichkeit, den Inhalt eines Elements zu ändern. Nutzen wir diese Eigenschaft, um unser Problem zu lösen:

Lösung

1. Originalinhalt beim Hover ausblenden:

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

Diese Regel verwendet die Anzeige: none-Eigenschaft zum Ausblenden des Element, das den „NEUEN“ Inhalt enthält, wenn der Mauszeiger über dem .item schwebt.

2. Zeigen Sie den neuen Inhalt mit ::after: an

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

Das Pseudo- Das Element ::after wird verwendet, um den „ADD“-Inhalt nach dem .new-label-Element einzufügen, wenn es sich im Schwebezustand befindet. Die Content-Eigenschaft gibt den neuen Inhalt an.

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

Fazit

Durch die Kombination der Content-Eigenschaft mit Hover-Effekten haben wir eine einfache und elegante Lösung erfolgreich implementiert um Inhalte beim Schweben mit reinem CSS zu ändern. Diese Technik ist weit verbreitet und kann verwendet werden, um Benutzerinteraktionen zu verbessern und zusätzliche Informationen auf dynamische und optisch ansprechende Weise bereitzustellen.

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