指向指示

使用指標事件來防止不必要的單擊和觸控互動。

具有重疊組件或懸停過渡的排列有時會啟動意外的滑鼠操作,並為您的網站訪客帶來較差的體驗。透過使用指向提示,您可以停用元素上的按一下或觸控操作,以確保純視覺元件不會幹擾其他元件的活動。

在本教程中,您將發現: 

  1. 如何使用指向提示
  2. 常見問題

如何使用指向提示

您可以利用指向提示來確保只有預期的元件對點擊和觸控操作做出反應。這對於管理重疊元件(例如,具有重疊文字或圖示的背景影片)或具有懸停移位或工具提示的設計上的操作是有益的。

在 Webflow 中,指向提示有兩種選擇: 

  • 自動的 — 所有組件的預設設置,允許標準單擊和觸摸操作
  • 沒有任何 — 禁止所有指向提示(即按一下和觸控操作)  
有用的提示: 您可以配置 指點沒有任何 暫時停用點擊和觸控操作以進行故障排除或修改設計,而無需更改設計的佈局。

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

若要配置指向提示以停用組件上的操作: 

  1. 選擇畫布上的組件
  2. 前往 風格面板 > 效果 > 活動
  3. 調整 指點沒有任何 

組件具有 指點 設定 沒有任何 出現時帶有“沒有點擊” 導航器面板中的符號。

評論: 組件具有 指點 設定 沒有任何 仍然在順序鍵盤導航中獲得焦點 標籤 鑰匙。 

必不可少的: 組件具有 指點 設定 沒有任何 保持可見,但在畫布上不可選擇。如果您想選擇一個組件 指點 設定 沒有任何,您可以從導航器面板執行此操作。

後代成分 一個組件的 指點 設定 沒有任何 繼承其指向提示設定並且是 不是 用“沒有點擊” 導航器面板中的符號。如果您希望覆蓋繼承的指向提示設定以使後代組件具有互動性,請在導航器面板中選擇後代組件,請訪問 風格面板 > 效果 > 活動,並調整 指點自動的.

評論: 如果您透過調整來停用組件上的操作 指點沒有任何 如果隨後將具有滑鼠觸發器的操作(例如,滑鼠點擊(點擊)、滑鼠懸停等)附加到該元件,則該操作將不會被觸發。

常見問題

為什麼覆蓋的元件即使位於頂部也不可點擊? 

對於覆蓋的元件,可以將指向配置為“無”,使其呈現非互動式。調整 指點自動的 如果此行為不是故意的,則啟用操作。

我配置了“指向無”,但仍然注意到不需要的操作。為什麼? 

頁面上的其他元件,特別是父元件或重疊元件,可能會影響該元件上的操作。確保您已為所有相關組件配置了適當的指向提示。

麥伊凡
Ewan Mak 的最新帖子 (看全部)