條件 - Webflow 部落格和資源

您可以透過在不同條件下改變元素的外觀和行為來向元素引入互動性。

在本次教學課程中：

設計不同條件下的元素

若要在各種條件（例如懸停條件）下對元素實施不同的樣式，請開啟「樣式」面板中選擇器中的「條件」下拉列表，然後選擇您想要設定樣式的條件。

從選擇器中的條件下拉清單中選擇條件後，在選擇器欄位的末端將顯示一個 verdant 狀態類別（也稱為偽類）。這表示您目前正在為元素設定該條件的樣式。

您可以自由地做出多種樣式選擇。您在此處應用的變更是最終使用者與此元素互動時將觀察到的內容。

無論當前條件如何，您實施的修改都將在畫布上顯而易見，直到您取消選擇或導航離開該條件。

從下拉式選單中選擇您想要設定樣式的條件。隨後，在「樣式」面板中所做的任何調整都將針對所選條件保留。

預設條件表示元素的初始狀態。這是元素的固有外觀。

自訂另一個條件後，您可以從「條件」下拉式選單中選擇「無」來恢復預設條件的樣式。

當滑鼠指標懸停在元素上時，懸停條件很明顯。請注意，懸停在大多數支援觸控的裝置上可能不可行，因此在為較小的視窗設計設計時請注意這一點。

啟動狀態是點選或點選元素時出現的狀態。此狀態繼承了懸停條件的樣式，因為啟動本質上是懸停狀態的擴展。

您可以專注於特定的互動元素（例如按鈕和連結），而無需使用鍵盤導航到它們來觸發它們。使用滑鼠或指標點擊或參與互動元素即可實現焦點和啟動。此條件模擬互動元素透過鍵盤、滑鼠或觸控互動獲得焦點的情況。

與焦點條件類似，此狀態模擬互動元素的焦點，而無需啟動（例如，透過鍵盤導航）。它通常適用於聚焦時的文字輸入字段，無論聚焦方式如何（例如，滑鼠、鍵盤等）。

為了提高依賴鍵盤導航的訪客對網站的可訪問性，設定此條件的樣式至關重要，以確保互動元素在頁面上易於識別。我們建議為互動式元素添加輪廓，因為它不會影響元素的佈局。

已存取條件表示先前已查看過的連結的狀態。此狀態繼承預設「無」條件的樣式。

對於存取的情況，您可以修改文字顏色、背景顏色和邊框顏色。只有在其他條件下設定不同時，背景顏色才會顯示。

此條件可在表單欄位的條件下拉清單中找到。它使您能夠將佔位符文字設定為與輸入的文字不同的樣式，輸入的文字繼承預設條件的排版樣式。

關於佔位符文本，您可以自訂排版、背景和陰影。

此條件可在表單 checkboxes 和單選按鈕的條件下拉清單中訪問，並在其元素設定中啟用自訂樣式。它允許您設定 checkbox 或單選按鈕的選取狀態的樣式。

完成條件的樣式修改後，您可以透過執行下列任一操作恢復為預設的「無」條件：

若要從條件中消除自訂樣式或所有樣式：

連結元素也具有目前狀態。當自訂樣式套用至目前條件時，它將反映使用者處於該狀態時連結元素的外觀。

當所選連結元素與目前頁面、部分或選項卡關聯時，「存在」條件會自動指派給「所有連結」標籤或該元素的類別。

「目前」條件繼承預設「無」條件的所有樣式。

若要存取任何連結區塊、文字連結、按鈕、導航連結的當前狀態：

選擇您的連結元素並按 D 開啟連結設置
選擇頁面選項並從下拉清單中選擇目前頁面（如果您的連結位於主頁上，請選擇主頁）
按 S 轉到樣式面板。如果您已將類別套用至鏈接，您將看到選擇器欄位中啟動的綠色目前狀態。如果沒有，請按一下選擇器並從開啟的下拉清單中選擇「所有連結」標籤。當前條件也將應用於標籤。