Elemente bei Hover reagieren lassen.

DXPR Builder lernenSeiten erstellenElemente gestaltenDesign-Leitfäden

Lassen Sie ein Element sich ändern, wenn Besuchende darauf zeigen: ein Kasten, der sich hebt, eine Schaltfläche, die abdunkelt, ein Bild, das aufhellt. Den Ruhezustand setzen Sie im Panel Style und den Hover-Zustand in seinem Zwilling, dem Panel Hover style. Das Beispiel baut eine graue Textbox, die bei Hover aufsteigt.

Das Video gibt einer Textbox Hintergrund, Innenabstand und einen Schatten, der bei Hover tiefer wird.

Textbox bauen

  1. Klicken Sie im Inhaltsbereich auf + und wählen Sie Section im Tab Layout.
  2. Klicken Sie auf + am Abschnitt und wählen Sie Row.
  3. Klicken Sie auf das Rastersymbol an der Zeile, wählen Sie die Kachel mit drei gleichen Spalten und klicken Sie auf Save.
  4. Klicken Sie in der ersten Spalte auf + und wählen Sie Text im Tab Content.
  5. Tippen Sie „Open day“, setzen Sie es auf Heading 3 und fügen Sie eine Zeile darunter hinzu.

Ruhezustand setzen

  1. Öffnen Sie im selben Einstellungsdialog das Panel Style.
  2. Wählen Sie einen hellgrauen Background.
  3. Setzen Sie im Boxmodell die obere, linke und untere Seite von Padding auf 24.
  4. Setzen Sie Border radius auf 8.
  5. Setzen Sie Drop shadow auf 1.

Hover-Zustand setzen

  1. Öffnen Sie das Panel Hover style.
  2. Setzen Sie Drop shadow auf 4.
  3. Klicken Sie auf Save.
  4. Klicken Sie in der DXPR-Builder-Symbolleiste auf Save.
  5. Öffnen Sie das Ansichtsmenü, das Augensymbol in der Symbolleiste, und wählen Sie Preview.
  6. Bewegen Sie den Zeiger auf die Textbox.

Was Sie sehen

Im Ruhezustand ist die Textbox grau mit runden Ecken und leichtem Schatten. Wenn der Zeiger sie erreicht, vertieft sich der Schatten und die Box scheint sich zu heben; wenn der Zeiger geht, senkt sie sich zurück. Die Schattenänderung ist animiert. Andere Hover-Änderungen, etwa eine neue Farbe, wechseln sofort.

Settings

Das Panel Hover style hält dieselben Felder wie das Panel Style. Ein leer gelassenes Feld behält den Ruhewert.

Feld Bei Hover nutzen
Margin, Border, Padding (Boxmodell) Element verschieben, einrahmen oder wachsen lassen
Font color Text hervorheben
Border color Rahmen betonen
Background Füllung ändern
Background image, Background style, Background position Bild tauschen oder bewegen
Border style Rahmen zeigen
Font size Text vergrößern
Border radius Ecken runden
Opacity Element aufdecken oder abdunkeln
Drop shadow Tiefe hinzufügen, von 1 bis 5

Gängige Muster

  • Kartenhebung: Drop shadow 1 in Style, 4 in Hover style.
  • Bildenthüllung: Opacity 0.7 in Style, 1 in Hover style.
  • Schaltflächen-Farbwechsel: ein dunkleres Background in Hover style.
  • Rahmenhervorhebung: Border style Solid mit hellem Border color in Style, einer Akzent-Border color in Hover style.

Wenn Sie den Effekt nicht sehen

  • Die Textbox ändert sich nicht, wenn Sie darauf zeigen. Der Hover-Wert gleicht dem Ruhewert, oder Sie haben ihn versehentlich im Panel Style gesetzt. Öffnen Sie More > Settings und erhöhen Sie Drop shadow im Panel Hover style.
  • Der Effekt ist beim Bearbeiten schwer zu beurteilen. Im Bearbeitungsmodus zeigt das Element außerdem Steuerungsleiste und Umriss, wenn Sie darauf zeigen. Wählen Sie Preview im Ansichtsmenü und zeigen Sie erneut darauf.
  • Opacity, Font size oder Border radius auf 0 wirken nicht. Ein Wert von 0 zählt bei diesen drei Feldern als nicht gesetzt. Um ein Element fast völlig auszublenden, nutzen Sie eine Opacity von 0.01.

Wie geht es weiter?