---
url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/diseno/efectos-hover'
title: 'Haz que los elementos reaccionen en hover | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T11:17:58+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Haz que un elemento cambie cuando una visita lo señala: un recuadro que se eleva, un botón que se oscurece, una imagen que se aclara. Fijas el aspecto en reposo en el panel Style y el aspecto en hover en su gemelo, el panel Hover style. El ejemplo crea un recuadro de texto gris que se eleva en hover.
  El vídeo da a un recuadro de texto un fondo, relleno y una sombra que se profundiza en hover.
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: 'Haz que los elementos reaccionen en hover'
      description: |-
        Haz que un elemento cambie cuando una visita lo señala: un recuadro que se eleva, un botón que se oscurece, una imagen que se aclara. Fijas el aspecto en reposo en el panel Style y el aspecto en hover en su gemelo, el panel Hover style. El ejemplo crea un recuadro de texto gris que se eleva en hover.
        El vídeo da a un recuadro de texto un fondo, relleno y una sombra que se profundiza en hover.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T11:17:58+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/es/hc/documentacion/aprender-dxpr-builder/diseno/efectos-hover'
      articleSection: 'Guías de diseño'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/diseno/efectos-hover'
      description: |-
        Haz que un elemento cambie cuando una visita lo señala: un recuadro que se eleva, un botón que se oscurece, una imagen que se aclara. Fijas el aspecto en reposo en el panel Style y el aspecto en hover en su gemelo, el panel Hover style. El ejemplo crea un recuadro de texto gris que se eleva en hover.
        El vídeo da a un recuadro de texto un fondo, relleno y una sombra que se profundiza en hover.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Inicio
            item: 'https://dxpr.com/es'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: es
---
[Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentacion) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Crear páginas](/es/hc/documentation/learn-dxpr-builder/build) /[Da estilo a tus elementos](/es/hc/documentation/learn-dxpr-builder/element-settings) /[Guías de diseño](/es/hc/documentation/learn-dxpr-builder/design/overview) # Haz que los elementos reaccionen en hover.

 Aprende DXPR BuilderCrear páginasDa estilo a tus elementosGuías de diseño

   ## En esta guía

 Guías relacionadas

- [Anima elementos al desplazar, en hover o al hacer clic](/es/hc/documentacion/aprender-dxpr-builder/diseno/pestana-animacion)
- [Da estilo a tus tarjetas](/es/hc/documentacion/aprender-dxpr-builder/diseno/estilos-tarjeta)

Haz que un elemento cambie cuando una visita lo señala: un recuadro que se eleva, un botón que se oscurece, una imagen que se aclara. Fijas el aspecto en reposo en el panel **Style** y el aspecto en hover en su gemelo, el panel **Hover style**. El ejemplo crea un recuadro de texto gris que se eleva en hover.

El vídeo da a un recuadro de texto un fondo, relleno y una sombra que se profundiza en hover.

  ## Crea el recuadro de texto

1. Haz clic en **+** en el área de contenido y escoge **Section** en la pestaña **Layout**.
2. Haz clic en **+** en la sección y escoge **Row**.
3. Haz clic en el icono de cuadrícula en la fila, escoge la baldosa con tres columnas iguales y haz clic en **Save**.
4. Haz clic en **+** en la primera columna y escoge **Text** en la pestaña **Content**.
5. Escribe "Open day", fíjalo en **Heading 3** y añade una línea debajo.

## Fija el estilo en reposo

1. En el mismo diálogo de ajustes, abre el panel **Style**.
2. Escoge un **Background** gris claro.
3. En el box model, fija los lados superior, izquierdo e inferior de **Padding** en 24.
4. Fija **Border radius** en 8.
5. Fija **Drop shadow** en 1.

## Fija el estilo hover

1. Abre el panel **Hover style**.
2. Fija **Drop shadow** en 4.
3. Haz clic en **Save**.
4. Haz clic en **Save** en la barra de DXPR Builder.
5. Abre el menú de vista, el icono de ojo en la barra, y elige **Preview**.
6. Mueve el puntero al recuadro de texto.

## Lo que ves

En reposo el recuadro de texto es gris con esquinas redondeadas y una sombra ligera. Cuando el puntero lo alcanza, la sombra se profundiza y el recuadro parece elevarse; cuando el puntero sale, vuelve a su sitio. El cambio de sombra es animado. Otros cambios hover, como un color nuevo, cambian a la vez.

## Ajustes

El panel **Hover style** tiene los mismos campos que el panel **Style**. Un campo dejado vacío conserva el valor en reposo.

| Campo | Uso en hover |
|---|---|
| **Margin**, **Border**, **Padding** (box model) | Mueve, enmarca o agranda el elemento |
| **Font color** | Resalta texto |
| **Border color** | Enfatiza el borde |
| **Background** | Cambia el relleno |
| **Background image**, **Background style**, **Background position** | Cambia o mueve la imagen |
| **Border style** | Muestra un borde |
| **Font size** | Agranda el texto |
| **Border radius** | Redondea las esquinas |
| **Opacity** | Revela o atenúa el elemento |
| **Drop shadow** | Añade profundidad, de 1 a 5 |

## Patrones comunes

- **Card lift**: **Drop shadow** 1 en **Style**, 4 en **Hover style**.
- **Picture reveal**: **Opacity** 0.7 en **Style**, 1 en **Hover style**.
- **Button colour change**: un **Background** más oscuro en **Hover style**.
- **Border highlight**: **Border style** **Solid** con un **Border color** claro en **Style**, un **Border color** de acento en **Hover style**.

## Si no ves el efecto

- **El recuadro de texto no cambia cuando lo señalas.** El valor hover iguala al valor en reposo, o lo fijaste en el panel **Style** por error. Abre **More** > **Settings** y sube **Drop shadow** en el panel **Hover style**.
- **El efecto es difícil de juzgar mientras editas.** En modo de edición el elemento también muestra su barra de controles y contorno cuando lo señalas. Elige **Preview** en el menú de vista y señálalo de nuevo.
- **Opacity, Font size o Border radius en 0 no tienen efecto.** Un valor 0 cuenta como no fijado para estos tres campos. Para fundir un elemento casi por completo, usa un **Opacity** de 0.01.

## ¿Qué sigue?

- [Anima elementos cuando entran en vista](/es/hc/documentacion/aprender-dxpr-builder/diseno/pestana-animacion): añade movimiento más allá del hover.
- [Da estilo a tus tarjetas](/es/hc/documentacion/aprender-dxpr-builder/diseno/estilos-tarjeta): combina hover con colores y sombras de tarjeta.