条件 - Webflow 博客和资源

您可以通过在不同条件下改变元素的外观和行为来为元素引入交互性。

在此教学课程中：

在不同条件下设计元素

要对不同条件下的元素实现不同的样式（例如悬停条件），请打开样式面板中选择器中的条件下拉列表，然后选择您想要设置样式的条件。

从选择器中的“条件”下拉列表中选择一个条件后，选择器字段的末端将显示一个绿色状态类（也称为伪类）。这表示您当前正在为元素设置该条件的样式。

您可以自由地选择多种样式。您在此处应用的更改是最终用户与此元素交互时将观察到的。

无论当前情况如何，您实施的修改都会在画布上显现出来，直到您取消选择或离开该情况。

从下拉菜单中选择您想要设置样式的条件。随后，在样式面板中所做的任何调整都将针对所选条件保留。

默认条件表示元素的初始状态。这是元素的固有外观。

自定义另一个条件后，您可以通过从条件下拉菜单中选择“无”来恢复默认条件样式。

当鼠标指针悬停在元素上方时，悬停条件很明显。请注意，在大多数支持触摸的设备上，悬停可能不可行，因此在为较小的视口设计时请注意这一点。

激活状态是单击或点击元素时出现的状态。此状态继承了悬停条件的样式，因为激活本质上是悬停状态的扩展。

您可以专注于特定的交互元素（例如按钮和链接），而无需使用键盘导航到它们来触发它们。使用鼠标或指针单击或使用交互元素可实现聚焦和激活。这种情况模拟了通过键盘、鼠标或触摸交互聚焦交互元素的情况。

与聚焦状态类似，此状态模拟交互元素的聚焦，无需激活（例如通过键盘导航）。它通常适用于聚焦时的文本输入字段，无论聚焦方式如何（例如鼠标、键盘等）。

为了提高网站对依赖键盘导航的访问者的可访问性，必须设计此条件以确保交互元素在页面上易于辨别。我们建议为交互元素添加轮廓，因为它不会影响元素的布局。

访问过条件表示链接之前被查看过的状态。此状态继承了默认“无”条件的样式。

对于访问的条件，您可以修改文本颜色、背景颜色和边框颜色。仅当在另一个条件下设置不同时，背景颜色才会显示。

此条件在表单字段的“条件下拉列表中”可用。它使您能够将占位符文本的样式与输入的文本区分开来，输入的文本继承了默认条件的排版样式。

关于占位符文本，您可以自定义字体、背景和阴影。

此条件可在 checkboxes 表单和单选按钮的“条件下拉列表中”访问，并在其“元素设置”中启用“自定义样式”。它允许您设置 checkbox 或单选按钮的选中状态的样式。

完成条件样式的修改后，您可以通过执行以下任一操作恢复为默认的“无”条件：

要从条件中消除自定义样式或所有样式：

链接元素还具有当前状态。当将自定义样式应用于当前状态时，它将反映用户处于该状态时链接元素的外观。

当该元素与当前页面、部分或选项卡相关联时，“当前条件”会自动分配给“所有链接”标签或所选链接元素的类。

当前条件继承了默认“无”条件的所有样式。

要访问任何链接块、文本链接、按钮、导航链接的当前状况：

选择您的链接元素并按 D 打开链接设置
选择页面选项并从下拉菜单中选择当前页面（如果您的链接在主页上，请选择主页）
按 S 转到样式面板。如果您已将类应用于链接，您将看到选择器字段中激活了绿色的当前条件。如果没有，请单击选择器并从打开的下拉列表中选择“所有链接”标签。当前条件也将应用于标签。