Ändern Sie die Textfarbe einer Artikelliste beim Überfahren mit der Maus.

Über das Element „Artikelliste“

Das Artikelliste Das Element in GemPages ermöglicht die Anzeige einer Liste von Artikeln mit Symbolen und Text, was nützlich ist, um Produktvorteile, Geschäftsbedingungen, Serviceleistungen und mehr hervorzuheben.

Wenn Sie mit diesem Element noch nicht vertraut sind, können Sie in unserem Leitfaden mehr darüber erfahren. werden auf dieser Seite erläutert.

Standardmäßig behält der Text in einer Artikelliste seine Farbe, auch wenn Kunden mit der Maus darüberfahren. Um einen interaktiveren Effekt zu erzielen oder wichtige Inhalte hervorzuheben, können Sie mithilfe von CSS eine benutzerdefinierte Hover-Farbe festlegen.

So ändern Sie die Textfarbe einer Artikelliste beim Überfahren mit der Maus

Schritt 1: Öffnen Sie den Bereich „Benutzerdefinierter Code“ des Elements „Artikelliste“.

Suchen Sie im GemPages-Editor nach dem/der Artikelliste Element, das Sie anpassen möchten.

Dann, Klicken Sie mit der rechten Maustaste auf das Element „Artikelliste“. und wählen Sie Benutzerdefinierter Code.

Schritt 2: Fügen Sie den CSS-Code für den Hover-Effekt hinzu.

Fügen Sie den folgenden CSS-Code in das Feld „Benutzerdefinierter Code“ ein:

.gXogrronUE .gp-icon-list-text:hover {

  Farbe: #FF3126;

}

Schritt 3: Ersetzen Sie die Elementklasse durch Ihre eigene Klasse

Im obigen Code, .gXogrronUE ist der Klassenselektor des jeweiligen Elements der Elementliste.

Sie müssen es durch die tatsächliche Klasse Ihres eigenen Elements der Artikelliste ersetzen.

Der endgültige Code sollte also folgende Struktur aufweisen:

.your-element-class .gp-icon-list-text:hover {

  Farbe: #FF3126;

}

• Ersetzen Ihre-Elementklasse mit der Klasse Ihres Elements in der Artikelliste.
• Ersetzen #FF3126 mit einem beliebigen Farbcode, den Sie für den Hover-Zustand verwenden möchten.

Sie können kostenlose Farbauswahlwerkzeuge verwenden, um einen Farbcode zu finden, zum Beispiel:

• HTML-Farbcodes
• Kühler
• Adobe Farbe