---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/design/hover-effects'
title: '让元素随悬停响应 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:42:50+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  让访客指向元素时它发生变化：上浮的盒子、变暗的按钮、变亮的图片。静止外观在 Style 面板中设置，悬停外观在其孪生面板 Hover style 中设置。示例搭建灰色文本框，悬停时上浮。
  该视频给文本框加背景、内边距和阴影，悬停时阴影加深。
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: 让元素随悬停响应
      description: |-
        让访客指向元素时它发生变化：上浮的盒子、变暗的按钮、变亮的图片。静止外观在 Style 面板中设置，悬停外观在其孪生面板 Hover style 中设置。示例搭建灰色文本框，悬停时上浮。
        该视频给文本框加背景、内边距和阴影，悬停时阴影加深。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T00:42:50+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/zh-hans/hc/documentation/learn-dxpr-builder/design/hover-effects'
      articleSection: Ontwerpgidsen
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/design/hover-effects'
      description: |-
        让访客指向元素时它发生变化：上浮的盒子、变暗的按钮、变亮的图片。静止外观在 Style 面板中设置，悬停外观在其孪生面板 Hover style 中设置。示例搭建灰色文本框，悬停时上浮。
        该视频给文本框加背景、内边距和阴影，悬停时阴影加深。
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 首页
            item: 'https://dxpr.com/zh-hans'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: zh-hans
---
[Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/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) # 让元素随悬停响应.

 Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

   ## In this guide

 Related guides

- [让元素随滚动、悬停或点击动起来](/zh-hans/hc/documentation/learn-dxpr-builder/design/animation-tab)
- [装饰卡片](/zh-hans/hc/documentation/learn-dxpr-builder/design/card-styles)

让访客指向元素时它发生变化：上浮的盒子、变暗的按钮、变亮的图片。静止外观在 **Style** 面板中设置，悬停外观在其孪生面板 **Hover style** 中设置。示例搭建灰色文本框，悬停时上浮。

该视频给文本框加背景、内边距和阴影，悬停时阴影加深。

  ## 搭建文本框

1. 点击内容区的 **+**，选择 **Section**（**Layout** 选项卡中）。
2. 点击版块上的 **+** 并选择 **Row**。
3. 点击行上的网格图标，选择三列等宽磁贴并点击 **Save**。
4. 点击第一列中的 **+**，选择 **Text**（**Content** 选项卡中）。
5. 输入“Open day”，设为 **Heading 3**，在下方加一行。

## 设置静止样式

1. 在同一设置对话框中打开 **Style** 面板。
2. 选择浅灰色 **Background**。
3. 在盒模型中，将 **Padding** 的上、左、下三侧设为 24。
4. 将 **Border radius** 设为 8。
5. 将 **Drop shadow** 设为 1。

## 设置悬停样式

1. 打开 **Hover style** 面板。
2. 将 **Drop shadow** 设为 4。
3. 点击 **Save**。
4. 点击 DXPR Builder 工具栏上的 **Save**。
5. 打开视图菜单（工具栏上的眼睛图标），选择 **Preview**。
6. 将指针移到文本框上。

## 您会看到的内容

静止时文本框灰色、圆角、浅阴影。指针到达时阴影加深，盒子像浮起来；指针离开后落回。阴影变化有动画。其他悬停变化（如新颜色）即时切换。

## 设置

该 **Hover style** 面板与 **Style** 面板字段相同。留空的字段保持静止值。

| 字段 | 悬停用途 |
|---|---|
| **Margin**、**Border**、**Padding**（盒模型） | 移动、加框或放大元素 |
| **Font color** | 高亮文本 |
| **Border color** | 强调边框 |
| **Background** | 更改填充 |
| **Background image**、**Background style**、**Background position** | 更换或移动图片 |
| **Border style** | 显示边框 |
| **Font size** | 放大文本 |
| **Border radius** | 圆角 |
| **Opacity** | 显现或淡化元素 |
| **Drop shadow** | 加深度，1 到 5 |

## 常用样式

- **卡片上浮**：**Drop shadow** 1（**Style** 中），**Hover style** 中 4。
- **图片显现**：**Opacity** 0.7（**Style** 中），**Hover style** 中 1。
- **按钮变色**：更深的 **Background**（**Hover style** 中）。
- **边框高亮**：**Border style** **Solid**，配浅色 **Border color**（**Style** 中），**Hover style** 中用强调 **Border color**。

## 如果您看不到效果

- **指向文本框它不变。** 悬停值与静止值相同，或您误设在了 **Style** 面板中。请打开 **More** > **Settings**，调高 **Drop shadow**（**Hover style** 面板中）。
- **编辑时效果不好判断。** 编辑模式下指向元素还会显示其控制栏和轮廓。请在视图菜单中选择 **Preview** 再指向一次。
- **Opacity、Font size 或 Border radius 设为 0 无效。** 这三个字段中 0 视为未设置。要让元素几乎完全淡出，请用 0.01 的 **Opacity**。

## 接下来做什么？

- [让元素随滚动进入视野动起来](/zh-hans/hc/documentation/learn-dxpr-builder/design/animation-tab)：悬停之外的动效。
- [装饰卡片](/zh-hans/hc/documentation/learn-dxpr-builder/design/card-styles)：将悬停与卡片颜色和阴影结合。