--- url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/ontwerp/hovereffecten' title: 'Elementen laten reageren bij hover | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T02:30:28+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Laat een element veranderen wanneer een bezoeker erop wijst: een vak dat omhoogkomt, een knop die donkerder wordt, een foto die oplicht. Je stelt de rustlook in in het paneel Style en de hoverlook in zijn tweeling, het paneel Hover style. Het voorbeeld bouwt een grijs tekstvak dat bij hover omhoogkomt. De video geeft een tekstvak een achtergrond, opvulling en een schaduw die bij hover dieper wordt. 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: 'Elementen laten reageren bij hover' description: |- Laat een element veranderen wanneer een bezoeker erop wijst: een vak dat omhoogkomt, een knop die donkerder wordt, een foto die oplicht. Je stelt de rustlook in in het paneel Style en de hoverlook in zijn tweeling, het paneel Hover style. Het voorbeeld bouwt een grijs tekstvak dat bij hover omhoogkomt. De video geeft een tekstvak een achtergrond, opvulling en een schaduw die bij hover dieper wordt. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T02:30:28+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/nl/hc/documentatie/dxpr-builder-leren/ontwerp/hovereffecten' articleSection: Ontwerpgidsen - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/ontwerp/hovereffecten' description: |- Laat een element veranderen wanneer een bezoeker erop wijst: een vak dat omhoogkomt, een knop die donkerder wordt, een foto die oplicht. Je stelt de rustlook in in het paneel Style en de hoverlook in zijn tweeling, het paneel Hover style. Het voorbeeld bouwt een grijs tekstvak dat bij hover omhoogkomt. De video geeft een tekstvak een achtergrond, opvulling en een schaduw die bij hover dieper wordt. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/nl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: nl --- [Helpcentrum](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[DXPR Builder leren](/nl/hc/documentation/learn-dxpr-builder) /[Pagina’s bouwen](/nl/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/nl/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/nl/hc/documentation/learn-dxpr-builder/design/overview) # Elementen laten reageren bij hover. DXPR Builder lerenPagina’s bouwenElementen stylenOntwerpgidsen ## In deze gids Gerelateerde gidsen - [Animeer elementen bij scrollen, hover of klik](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/animatie-tabblad) - [Kies kaartstijlen die op de hele site terugkeren](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/kaartstijlen) Laat een element veranderen wanneer een bezoeker erop wijst: een vak dat omhoogkomt, een knop die donkerder wordt, een foto die oplicht. Je stelt de rustlook in in het paneel **Style** en de hoverlook in zijn tweeling, het paneel **Hover style**. Het voorbeeld bouwt een grijs tekstvak dat bij hover omhoogkomt. De video geeft een tekstvak een achtergrond, opvulling en een schaduw die bij hover dieper wordt. ## Het tekstvak bouwen 1. Klik op **+** in het inhoudsgebied en kies **Section** op het tabblad **Layout**. 2. Klik op **+** op de sectie en kies **Row**. 3. Klik op het gridpictogram op de rij, kies de tegel met drie gelijke kolommen en klik op **Save**. 4. Klik op **+** in de eerste kolom en kies **Text** op het tabblad **Content**. 5. Typ "Open day", zet het op **Heading 3** en voeg één regel eronder toe. ## Stel de ruststijl in 1. Open in hetzelfde instellingendialoogvenster het paneel **Style**. 2. Kies een lichtgrijze **Background**. 3. Zet in het boxmodel de boven-, linker- en onderkant van **Padding** op 24. 4. Zet **Border radius** op 8. 5. Zet **Drop shadow** op 1. ## Stel de hoverstijl in 1. Open het paneel **Hover style**. 2. Zet **Drop shadow** op 4. 3. Klik op **Save**. 4. Klik op **Save** op de DXPR Builder-werkbalk. 5. Open het weergavemenu, het oogpictogram op de werkbalk, en kies **Preview**. 6. Beweeg de pointer op het tekstvak. ## Wat je ziet In rust is het tekstvak grijs met afgeronde hoeken en een lichte schaduw. Wanneer de pointer hem bereikt, wordt de schaduw dieper en lijkt het vak omhoog te komen; wanneer de pointer weggaat, zakt het terug. De schaduwverandering is geanimeerd. Andere hoverwijzigingen, zoals een nieuwe kleur, schakelen meteen om. ## Instellingen Het paneel **Hover style** bevat dezelfde velden als het paneel **Style**. Een veld dat leeg blijft behoudt de rustwaarde. | Veld | Gebruik bij hover | |---|---| | **Margin**, **Border**, **Padding** (box model) | Verschuif, kader of vergroot het element | | **Font color** | Licht tekst uit | | **Border color** | Benadruk de rand | | **Background** | Wijzig de vulling | | **Background image**, **Background style**, **Background position** | Verwissel of verplaats de foto | | **Border style** | Toon een rand | | **Font size** | Vergroot de tekst | | **Border radius** | Rond de hoeken af | | **Opacity** | Toon of dim het element | | **Drop shadow** | Voeg diepte toe, van 1 tot 5 | ## Veelvoorkomende patronen - **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**: een donkerdere **Background** in **Hover style**. - **Border highlight**: **Border style** **Solid** met een lichte **Border color** in **Style**, een accent-**Border color** in **Hover style**. ## Als je het effect niet ziet - **Het tekstvak verandert niet wanneer je erop wijst.** De hoverwaarde is gelijk aan de rustwaarde, of je stelde hem per ongeluk in het paneel **Style** in. Open **More** > **Settings** en verhoog **Drop shadow** in het paneel **Hover style**. - **Het effect is moeilijk te beoordelen terwijl je bewerkt.** In de bewerkmodus toont het element ook zijn besturingsbalk en omlijning wanneer je erop wijst. Kies **Preview** in het weergavemenu en wijs het opnieuw aan. - **Opacity, Font size of Border radius op 0 heeft geen effect.** Een waarde 0 telt als niet ingesteld voor deze drie velden. Om een element bijna volledig te laten vervagen, gebruik je een **Opacity** van 0.01. ## Wat nu? - [Animeer elementen terwijl ze in beeld scrollen](/nl/hc/documentation/learn-dxpr-builder/design/animation-tab): voeg beweging toe voorbij hover. - [Je kaarten stijlen](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/kaartstijlen): combineer hover met kaartkleuren en schaduwen.