让元素随悬停响应.

Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

让访客指向元素时它发生变化：上浮的盒子、变暗的按钮、变亮的图片。静止外观在 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。

接下来做什么？