指向的指示

使用指针事件来防止不必要的点击和触摸交互。

组件重叠或悬停过渡的安排有时会激活意外的鼠标操作,并给网站访客带来不佳的体验。通过使用指向提示,您可以停用元素上的单击或触摸操作,以确保纯视觉组件不会干扰其他组件的活动。

在本教程中,您将发现: 

  1. 如何使用指向线索
  2. 常见问题

如何使用指向线索

您可以利用指向提示来确保只有预期的组件才会对点击和触摸操作做出反应。这对于管理重叠组件(例如,带有重叠文本或图标的背景视频)或带有悬停移位或工具提示的设计上的操作非常有用。

在 Webflow 中,指向提示有两种选择: 

  • 自动的 — 所有组件的默认设置,允许标准点击和触摸操作
  • 没有任何 — 禁止所有指向提示(即点击和触摸操作)  
有用的提示: 您可以配置 指向没有任何 暂时停用点击和触摸操作以排除故障或修改设计而不改变设计布局。

如何配置指向提示以禁用操作

要配置指向提示以禁用组件上的操作: 

  1. 在画布上选择组件
  2. 前往 样式面板 > 效果 > 活动
  3. 调整 指向没有任何 

组件 指向 设置 没有任何 出现“没有点击”符号。

评论: 组件 指向 设置 没有任何 在使用顺序键盘导航时仍能获得焦点 标签 钥匙。 

必不可少的: 组件 指向 设置 没有任何 仍然可见,但无法在画布上选择。如果您希望选择带有 指向 设置 没有任何,您可以从导航器面板中执行此操作。

子代成分 组件 指向 设置 没有任何 继承其指向提示设置,并且 不是 标有“没有点击”符号。如果您希望覆盖继承的指向提示设置以使子组件具有交互性,请在导航器面板中选择子组件,访问 样式面板 > 效果 > 活动并调整 指向自动的.

评论: 如果您通过调整来停用组件上的操作 指向没有任何 然后将具有鼠标触发器的动作(例如,鼠标单击(点击)、鼠标悬停等)附加到该组件,则该动作将不会被触发。

常见问题

为什么覆盖的组件即使位于顶部也不可点击? 

可以将覆盖组件的指向配置为无,使其不可交互。调整 指向自动的 如果此行为不是故意的,则启用操作。

我配置了指向无,但仍然注意到不想要的操作。为什么? 

页面上的其他组件(尤其是父组件或重叠组件)可能会影响此组件上的操作。请确保已为所有相关组件配置了适当的指向提示。

麦宜云
Ewan Mak 的最新帖子 (查看全部)