Elemente auf Hover reagieren lassen.

Learn DXPR BuilderExtendArchitectuur en API’s

Lassen Sie ein Element sich ändern, wenn Besucher darauf zeigen: eine Box, die sich hebt, ein Button, der dunkler wird, ein Bild, das heller wird. Das ruhende Aussehen stellen Sie im Panel Style ein, das Hover-Aussehen in seinem Zwilling, dem Panel Hover style. Das Beispiel baut eine graue Textbox, die sich bei Hover hebt.

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

Die Textbox bauen

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

Den ruhenden Stil einstellen

  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.

Den Hover-Stil einstellen

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

Was Sie sehen

In Ruhe ist die Textbox grau mit abgerundeten Ecken und leichtem Schatten. Wenn der Zeiger sie erreicht, wird der Schatten tiefer und die Box scheint sich zu heben; wenn der Zeiger sie verlässt, sinkt sie zurück. Die Schattenänderung ist animiert. Andere Hover-Änderungen, etwa eine neue Farbe, wechseln sofort.

Einstellungen

Das Panel Hover style enthält dieselben Felder wie das Panel Style. Ein leer gelassenes Feld behält den ruhenden Wert.

Feld Nutzung bei Hover
Margin, Border, Padding (Boxmodell) Das Element verschieben, rahmen oder wachsen lassen
Font color Text hervorheben
Border color Den Rahmen betonen
Background Die Füllung wechseln
Background image, Background style, Background position Das Bild tauschen oder bewegen
Border style Einen Rahmen zeigen
Font size Den Text vergrößern
Border radius Die Ecken runden
Opacity Das Element auf- oder abblenden
Drop shadow Tiefe geben, von 1 bis 5

Gängige Muster

  • Card lift: Drop shadow 1 in Style, 4 in Hover style.
  • Picture reveal: Opacity 0.7 in Style, 1 in Hover style.
  • Button colour change: ein dunklerer Background in Hover style.
  • Border highlight: Border style Solid mit heller 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 ruhenden Wert, 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 lässt sich beim Bearbeiten schwer beurteilen. Im Bearbeitungsmodus zeigt das Element zusätzlich Kontrollleiste 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 haben keine Wirkung. Der Wert 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?