---
url: 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/design/hover-effects'
title: 'Tornar os elementos reativos ao pairar | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T11:47:24+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Faça um elemento mudar quando um visitante aponta para ele: uma caixa que levanta, um botão que escurece, uma imagem que clareia. Define o aspeto de repouso no painel Style e o aspeto ao pairar no gémeo, o painel Hover style. O exemplo constrói uma caixa de texto cinzenta que levanta ao pairar.
  O vídeo dá a uma caixa de texto um fundo, enchimento e uma sombra que aprofunda ao pairar.
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:47:24+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Tornar os elementos reativos ao pairar'
      description: |-
        Faça um elemento mudar quando um visitante aponta para ele: uma caixa que levanta, um botão que escurece, uma imagem que clareia. Define o aspeto de repouso no painel Style e o aspeto ao pairar no gémeo, o painel Hover style. O exemplo constrói uma caixa de texto cinzenta que levanta ao pairar.
        O vídeo dá a uma caixa de texto um fundo, enchimento e uma sombra que aprofunda ao pairar.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T11:47:24+0000'
      dateModified: '2026-10-24T11:47: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/pt-pt/hc/documentation/learn-dxpr-builder/design/hover-effects'
      articleSection: Ontwerpgidsen
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/design/hover-effects'
      description: |-
        Faça um elemento mudar quando um visitante aponta para ele: uma caixa que levanta, um botão que escurece, uma imagem que clareia. Define o aspeto de repouso no painel Style e o aspeto ao pairar no gémeo, o painel Hover style. O exemplo constrói uma caixa de texto cinzenta que levanta ao pairar.
        O vídeo dá a uma caixa de texto um fundo, enchimento e uma sombra que aprofunda ao pairar.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Início
            item: 'https://dxpr.com/pt-pt'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: pt-pt
---
[Help Center](/pt-pt/node/75)/[Documentation](/pt-pt/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) # Tornar os elementos reativos ao pairar.

 Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

   ## In this guide

 Related guides

- [Animar elementos ao deslocar, pairar ou clicar](/pt-pt/hc/documentation/learn-dxpr-builder/design/animation-tab)
- [Estilizar os cartões](/pt-pt/hc/documentation/learn-dxpr-builder/design/card-styles)

Faça um elemento mudar quando um visitante aponta para ele: uma caixa que levanta, um botão que escurece, uma imagem que clareia. Define o aspeto de repouso no painel **Style** e o aspeto ao pairar no gémeo, o painel **Hover style**. O exemplo constrói uma caixa de texto cinzenta que levanta ao pairar.

O vídeo dá a uma caixa de texto um fundo, enchimento e uma sombra que aprofunda ao pairar.

  ## Construir a caixa de texto

1. Clique em **+** na área de conteúdo e escolha **Section** no separador **Layout**.
2. Clique em **+** na secção e escolha **Row**.
3. Clique no ícone de grelha na linha, escolha o mosaico com três colunas iguais e clique em **Save**.
4. Clique em **+** na primeira coluna e escolha **Text** no separador **Content**.
5. Escreva "Open day", defina como **Heading 3** e adicione uma linha abaixo.

## Definir o estilo de repouso

1. No mesmo diálogo de definições, abra o painel **Style**.
2. Escolha um **Background** cinzento claro.
3. No modelo de caixa, defina os lados superior, esquerdo e inferior de **Padding** como 24.
4. Defina **Border radius** como 8.
5. Defina **Drop shadow** como 1.

## Definir o estilo ao pairar

1. Abra o painel **Hover style**.
2. Defina **Drop shadow** como 4.
3. Clique em **Save**.
4. Clique em **Save** na barra de ferramentas do DXPR Builder.
5. Abra o menu de vista, o ícone de olho na barra de ferramentas, e escolha **Preview**.
6. Mova o ponteiro para cima da caixa de texto.

## O que vê

Em repouso, a caixa de texto é cinzenta com cantos arredondados e uma sombra leve. Quando o ponteiro a alcança, a sombra aprofunda e a caixa parece levantar; quando o ponteiro sai, assenta de volta. A mudança de sombra é animada. Outras mudanças ao pairar, como uma cor nova, trocam de imediato.

## Definições

O painel **Hover style** tem os mesmos campos do painel **Style**. Um campo deixado vazio mantém o valor de repouso.

| Field | Use on hover |
|---|---|
| **Margin**, **Border**, **Padding** (modelo de caixa) | Deslocar, emoldurar ou aumentar o elemento |
| **Font color** | Destacar texto |
| **Border color** | Enfatizar a borda |
| **Background** | Mudar o preenchimento |
| **Background image**, **Background style**, **Background position** | Trocar ou mover a imagem |
| **Border style** | Mostrar uma borda |
| **Font size** | Ampliar o texto |
| **Border radius** | Arredondar os cantos |
| **Opacity** | Revelar ou esbater o elemento |
| **Drop shadow** | Dar profundidade, de 1 a 5 |

## Padrões comuns

- **Card lift**: **Drop shadow** 1 em **Style**, 4 em **Hover style**.
- **Picture reveal**: **Opacity** 0.7 em **Style**, 1 em **Hover style**.
- **Button colour change**: um **Background** mais escuro em **Hover style**.
- **Border highlight**: **Border style** **Solid** com um **Border color** claro em **Style**, um **Border color** de destaque em **Hover style**.

## Se o efeito não aparece

- **The text box does not change when you point at it.** O valor ao pairar é igual ao valor de repouso, ou definiu-o no painel **Style** por engano. Abra **More** > **Settings** e aumente **Drop shadow** no painel **Hover style**.
- **The effect is hard to judge while you edit.** No modo de edição, o elemento também mostra a barra de controlos e o contorno quando aponta para ele. Escolha **Preview** no menu de vista e aponte outra vez.
- **Opacity, Font size or Border radius set to 0 has no effect.** Um valor de 0 conta como não definido para estes três campos. Para esbater um elemento quase por completo, use um **Opacity** de 0.01.

## O que se segue?

- [Animar elementos à medida que entram na vista](/hc/documentation/learn-dxpr-builder/design/animation-tab): adicione movimento além do pairar.
- [Estilizar os cartões](/hc/documentation/learn-dxpr-builder/design/card-styles): combine o pairar com cores e sombras de cartão.