Haz que los elementos reaccionen en hover.

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

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?