--- url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/design/hover-effekte' title: 'Elemente bei Hover reagieren lassen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:02:12+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Elemente bei Hover reagieren lassen' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T04:02:12+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/design/hover-effekte' articleSection: Design-Leitfäden - '@type': WebPage '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/design/hover-effekte' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Builder lernen](/de/hc/documentation/learn-dxpr-builder) /[Seiten erstellen](/de/hc/documentation/learn-dxpr-builder/build) /[Elemente gestalten](/de/hc/documentation/learn-dxpr-builder/element-settings) /[Design-Leitfäden](/de/hc/documentation/learn-dxpr-builder/design/overview) # Elemente bei Hover reagieren lassen. DXPR Builder lernenSeiten erstellenElemente gestaltenDesign-Leitfäden ## In diesem Leitfaden Verwandte Leitfäden - [Elemente bei Scroll, Hover oder Klick animieren](/de/hc/dokumentation/dxpr-builder-lernen/design/animation-tab) - [Karten stylen](/de/hc/dokumentation/dxpr-builder-lernen/design/card-stile) 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? - [Elemente animieren, während sie ins Bild scrollen](/de/hc/dokumentation/dxpr-builder-lernen/design/animation-tab): Bewegung über Hover hinaus hinzufügen. - [Karten stylen](/de/hc/dokumentation/dxpr-builder-lernen/design/card-stile): Hover mit Kartenfarben und Schatten kombinieren.