---
url: 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/design/hover-effects'
title: 'Fai reagire gli elementi al passaggio del mouse | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T03:01:33+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Fai cambiare un elemento quando un visitatore lo indica: un riquadro che si solleva, un pulsante che si scurisce, un’immagine che si schiarisce. Imposti l’aspetto a riposo nel pannello Style e l’aspetto hover nel suo gemello, il pannello Hover style. L’esempio costruisce un riquadro di testo grigio che si solleva al passaggio del mouse.
  Il video dà a un riquadro di testo sfondo, padding e un’ombra che si intensifica al passaggio del mouse.
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-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Fai reagire gli elementi al passaggio del mouse'
      description: |-
        Fai cambiare un elemento quando un visitatore lo indica: un riquadro che si solleva, un pulsante che si scurisce, un’immagine che si schiarisce. Imposti l’aspetto a riposo nel pannello Style e l’aspetto hover nel suo gemello, il pannello Hover style. L’esempio costruisce un riquadro di testo grigio che si solleva al passaggio del mouse.
        Il video dà a un riquadro di testo sfondo, padding e un’ombra che si intensifica al passaggio del mouse.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T03:01:33+0000'
      dateModified: '2026-10-24T09:09:48+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/it/hc/documentation/learn-dxpr-builder/design/hover-effects'
      articleSection: Ontwerpgidsen
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/design/hover-effects'
      description: |-
        Fai cambiare un elemento quando un visitatore lo indica: un riquadro che si solleva, un pulsante che si scurisce, un’immagine che si schiarisce. Imposti l’aspetto a riposo nel pannello Style e l’aspetto hover nel suo gemello, il pannello Hover style. L’esempio costruisce un riquadro di testo grigio che si solleva al passaggio del mouse.
        Il video dà a un riquadro di testo sfondo, padding e un’ombra che si intensifica al passaggio del mouse.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/it'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: it
---
[Help Center](/it/hc)/[Documentation](/it/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) # Fai reagire gli elementi al passaggio del mouse.

 Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

   ## In this guide

 Related guides

- [Anima gli elementi allo scorrimento, al passaggio del mouse o al clic](/it/hc/documentation/learn-dxpr-builder/design/animation-tab)
- [Dai stile alle tue card](/it/hc/documentation/learn-dxpr-builder/design/card-styles)

Fai cambiare un elemento quando un visitatore lo indica: un riquadro che si solleva, un pulsante che si scurisce, un’immagine che si schiarisce. Imposti l’aspetto a riposo nel pannello **Style** e l’aspetto hover nel suo gemello, il pannello **Hover style**. L’esempio costruisce un riquadro di testo grigio che si solleva al passaggio del mouse.

Il video dà a un riquadro di testo sfondo, padding e un’ombra che si intensifica al passaggio del mouse.

  ## Costruisci il riquadro di testo

1. Fai clic su **+** nell’area di contenuto e scegli **Section** nella scheda **Layout**.
2. Fai clic su **+** sulla sezione e scegli **Row**.
3. Fai clic sull’icona griglia sulla riga, scegli il riquadro con tre colonne uguali e fai clic su **Save**.
4. Fai clic su **+** nella prima colonna e scegli **Text** nella scheda **Content**.
5. Digita "Open day", impostalo a **Titolo 3** e aggiungi una riga sotto di esso.

## Imposta lo stile a riposo

1. Nella stessa finestra delle impostazioni, apri il pannello **Style**.
2. Scegli un **Background** grigio chiaro.
3. Nel modello di riquadro, imposta i lati superiore, sinistro e inferiore di **Padding** a 24.
4. Imposta **Border radius** a 8.
5. Imposta **Drop shadow** a 1.

## Imposta lo stile hover

1. Apri il pannello **Hover style**.
2. Imposta **Drop shadow** a 4.
3. Fai clic su **Save**.
4. Fai clic su **Save** nella barra di DXPR Builder.
5. Apri il menu vista, l’icona occhio sulla barra, e scegli **Preview**.
6. Sposta il puntatore sul riquadro di testo.

## Cosa vedrai

A riposo il riquadro di testo è grigio con angoli arrotondati e un’ombra leggera. Quando il puntatore lo raggiunge, l’ombra si intensifica e il riquadro sembra sollevarsi; quando il puntatore va via, torna giù. Il cambio d’ombra è animato. Altri cambi hover, come un nuovo colore, scattano subito.

## Impostazioni

Il pannello **Hover style** contiene gli stessi campi del pannello **Style**. Un campo lasciato vuoto mantiene il valore a riposo.

| Campo | Uso al passaggio del mouse |
|---|---|
| **Margin**, **Border**, **Padding** (modello di riquadro) | Sposta, incornicia o ingrandisci l’elemento |
| **Font color** | Evidenzia il testo |
| **Border color** | Enfatizza il bordo |
| **Background** | Cambia il riempimento |
| **Background image**, **Background style**, **Background position** | Scambia o sposta l’immagine |
| **Border style** | Mostra un bordo |
| **Font size** | Ingrandisci il testo |
| **Border radius** | Arrotonda gli angoli |
| **Opacity** | Rivela o attenua l’elemento |
| **Drop shadow** | Aggiungi profondità, da 1 a 5 |

## Schemi comuni

- **Sollevamento card**: **Drop shadow** 1 in **Style**, 4 in **Hover style**.
- **Rivelazione immagine**: **Opacity** 0.7 in **Style**, 1 in **Hover style**.
- **Cambio colore pulsante**: un **Background** più scuro in **Hover style**.
- **Evidenziazione bordo**: **Border style** **Solid** con un **Border color** chiaro in **Style**, un **Border color** d’accento in **Hover style**.

## Se non vedi l’effetto

- **Il riquadro di testo non cambia quando lo indichi.** Il valore hover è uguale a quello a riposo, oppure lo hai impostato per sbaglio nel pannello **Style**. Apri **More** > **Settings** e alza **Drop shadow** nel pannello **Hover style**.
- **È difficile valutare l’effetto mentre modifichi.** In modalità di modifica l’elemento mostra anche barra di controllo e contorno quando lo indichi. Scegli **Preview** nel menu vista e indicalo di nuovo.
- **Opacity, Font size o Border radius a 0 non hanno effetto.** Un valore 0 conta come non impostato per questi tre campi. Per sfumare un elemento quasi del tutto, usa un **Opacity** di 0.01.

## Prossimi passi

- [Anima gli elementi mentre scorrono in vista](/it/hc/documentation/learn-dxpr-builder/design/animation-tab): aggiungi movimento oltre l’hover.
- [Dai stile alle tue card](/it/hc/documentation/learn-dxpr-builder/design/card-styles): combina hover con colori e ombre delle card.