--- url: 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/design/hover-effects' title: 'Faire réagir les éléments au survol | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:00:24+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Faites changer un élément quand un visiteur le pointe : une boîte qui se soulève, un bouton qui s’assombrit, une image qui s’éclaircit. Vous définissez l’aspect de repos dans le panneau Style et l’aspect de survol dans son jumeau, le panneau Hover style. L’exemple construit une boîte de texte grise qui se soulève au survol. La vidéo donne à une zone de texte un arrière-plan, une marge intérieure et une ombre qui s’approfondit au survol. tags: - Ontwerpgidsen image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:00:24+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Faire réagir les éléments au survol' description: |- Faites changer un élément quand un visiteur le pointe : une boîte qui se soulève, un bouton qui s’assombrit, une image qui s’éclaircit. Vous définissez l’aspect de repos dans le panneau Style et l’aspect de survol dans son jumeau, le panneau Hover style. L’exemple construit une boîte de texte grise qui se soulève au survol. La vidéo donne à une zone de texte un arrière-plan, une marge intérieure et une ombre qui s’approfondit au survol. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:00:24+0000' dateModified: '2026-10-24T11:00:24+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/fr/hc/documentation/learn-dxpr-builder/design/hover-effects' articleSection: Ontwerpgidsen - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/design/hover-effects' description: |- Faites changer un élément quand un visiteur le pointe : une boîte qui se soulève, un bouton qui s’assombrit, une image qui s’éclaircit. Vous définissez l’aspect de repos dans le panneau Style et l’aspect de survol dans son jumeau, le panneau Hover style. L’exemple construit une boîte de texte grise qui se soulève au survol. La vidéo donne à une zone de texte un arrière-plan, une marge intérieure et une ombre qui s’approfondit au survol. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Accueil item: 'https://dxpr.com/fr' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: fr --- [Help Center](/fr/hc)/[Documentation](/fr/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # Faire réagir les éléments au survol. Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen ## In this guide Related guides - [Animer les éléments au défilement, au survol ou au clic](/fr/hc/documentation/learn-dxpr-builder/design/animation-tab) - [Styliser vos cartes](/fr/hc/documentation/learn-dxpr-builder/design/card-styles) Faites changer un élément quand un visiteur le pointe : une boîte qui se soulève, un bouton qui s’assombrit, une image qui s’éclaircit. Vous définissez l’aspect de repos dans le panneau **Style** et l’aspect de survol dans son jumeau, le panneau **Hover style**. L’exemple construit une boîte de texte grise qui se soulève au survol. La vidéo donne à une zone de texte un arrière-plan, une marge intérieure et une ombre qui s’approfondit au survol. ## Construire la boîte de texte 1. Cliquez sur **+** dans la zone de contenu et choisissez **Section** dans l’onglet **Layout**. 2. Cliquez sur **+** sur la section et choisissez **Row**. 3. Cliquez l’icône de grille sur la ligne, choisissez la tuile à trois colonnes égales et cliquez sur **Save**. 4. Cliquez sur **+** dans la première colonne et choisissez **Text** dans l’onglet **Content**. 5. Saisissez « Open day », mettez-le en **Heading 3** et ajoutez une ligne en dessous. ## Définir le style de repos 1. Dans le même dialogue de réglages, ouvrez le panneau **Style**. 2. Choisissez un **Background** gris clair. 3. Dans le modèle de boîte, mettez les côtés haut, gauche et bas de **Padding** à 24. 4. Réglez **Border radius** sur 8. 5. Réglez **Drop shadow** sur 1. ## Définir le style de survol 1. Ouvrez le panneau **Hover style**. 2. Réglez **Drop shadow** sur 4. 3. Cliquez sur **Save**. 4. Cliquez sur **Save** sur la barre d’outils de DXPR Builder. 5. Ouvrez le menu d’affichage, l’icône en forme d’œil sur la barre d’outils, et choisissez **Preview**. 6. Amenez le pointeur sur la boîte de texte. ## Ce que vous voyez Au repos, la boîte de texte est grise avec des coins arrondis et une ombre légère. Quand le pointeur l’atteint, l’ombre s’approfondit et la boîte semble se soulever ; quand le pointeur part, elle se repose. Le changement d’ombre est animé. Les autres changements de survol, comme une nouvelle couleur, basculent aussitôt. ## Paramètres Le panneau **Hover style** contient les mêmes champs que le panneau **Style**. Un champ laissé vide garde la valeur de repos. | Champ | Usage au survol | |---|---| | **Margin**, **Border**, **Padding** (modèle de boîte) | Décaler, encadrer ou agrandir l’élément | | **Font color** | Mettre le texte en valeur | | **Border color** | Accentuer la bordure | | **Background** | Changer le remplissage | | **Background image**, **Background style**, **Background position** | Changer l’image ou la déplacer | | **Border style** | Afficher une bordure | | **Font size** | Agrandir le texte | | **Border radius** | Arrondir les coins | | **Opacity** | Révéler ou atténuer l’élément | | **Drop shadow** | Ajouter de la profondeur, de 1 à 5 | ## Motifs courants - **Card lift** : **Drop shadow** 1 dans **Style**, 4 dans **Hover style**. - **Picture reveal** : **Opacity** 0.7 dans **Style**, 1 dans **Hover style**. - **Button colour change** : un **Background** plus sombre dans **Hover style**. - **Border highlight** : **Border style** **Solid** avec une **Border color** claire dans **Style**, une **Border color** d’accentuation dans **Hover style**. ## Si vous ne voyez pas l’effet - **La boîte de texte ne change pas quand vous la pointez.** La valeur de survol égale la valeur de repos, ou vous l’avez définie dans le panneau **Style** par erreur. Ouvrez **More** > **Settings** et augmentez **Drop shadow** dans le panneau **Hover style**. - **L’effet est dur à juger pendant la modification.** En mode modification, l’élément montre aussi sa barre de contrôle et son contour quand vous le pointez. Choisissez **Preview** dans le menu d’affichage et pointez-le de nouveau. - **Opacity, Font size ou Border radius à 0 est sans effet.** Une valeur de 0 compte comme non définie pour ces trois champs. Pour faire presque disparaître un élément en fondu, utilisez une **Opacity** de 0.01. ## Et ensuite ? - [Animer les éléments quand ils défilent à l’écran](/hc/documentation/learn-dxpr-builder/design/animation-tab) : ajouter du mouvement au-delà du survol. - [Styliser vos cartes](/hc/documentation/learn-dxpr-builder/design/card-styles) : combiner le survol avec les couleurs et ombres des cartes.