--- url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/migration/from-paragraphs' title: 'Elemente auf Hover reagieren lassen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:40:05+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Architectuur en API’s' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T08:40:05+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Elemente auf Hover reagieren lassen' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:40:05+0000' dateModified: '2026-10-24T08:40:05+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/documentation/learn-dxpr-builder/migration/from-paragraphs' articleSection: 'Architectuur en API’s' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/migration/from-paragraphs' description: |- 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. 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 --- [Help Center](/de/hc)/[Documentation](/de/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Extend](/hc/documentation/learn-dxpr-builder/extend) /[Architectuur en API’s](/hc/documentation/learn-dxpr-builder/extend/architecture) # Elemente auf Hover reagieren lassen. Learn DXPR BuilderExtendArchitectuur en API’s ## In this guide Related guides - [Ihr Layout für Telefone optimieren](/de/hc/documentation/learn-dxpr-builder/migration/from-layout-builder) - [Ein Element finden und hinzufügen](/de/hc/documentation/learn-dxpr-builder/editing/element-picker) 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? - [Elemente beim Einscrollen animieren](/de/hc/documentation/learn-dxpr-builder/design/animation-tab): Bewegung über Hover hinaus hinzufügen. - [Ihre Cards stylen](/de/hc/documentation/learn-dxpr-builder/design/card-styles): Hover mit Card-Farben und Schatten kombinieren.