以不同的方式设置悬停、焦点和活动状态的样式

2025-06-10

以不同的方式设置悬停、焦点和活动状态的样式

多年来，我一直用同样的方式设计:hover、:focus和状态。我不记得什么时候开始这样设计的。以下是我经常使用的代码：:active

// Not the best approach. I'll explain why in this article
.selector {
  &:hover,
  &:focus,
  &:active {
    // Styles here
  }
}
Enter fullscreen mode Exit fullscreen mode

当我更加关注键盘可访问性（并因此更加关注焦点）时，我开始认为我们不应该以相同的方式设置悬停、焦点和活动状态的样式。

悬停、焦点和活动状态应采用不同的样式。

原因很简单：它们是不同的州！

今天，我想向你们展示一种轻松打造这三种状态的神奇方法。

让我们从开始吧:hover。

悬停状态样式

:hover当用户将鼠标移到元素上时触发。

background-color悬停状态通常用（和/或color）的变化来表示。状态的差异不必太明显，因为用户已经知道他们悬停在了某个东西上。

button {
  background-color: #dedede;
}

button:hover {
  background-color: #aaa;
}
Enter fullscreen mode Exit fullscreen mode

悬停时，按钮会稍微变暗。

焦点状态的样式

:focus当元素获得焦点时激活。元素可以通过两种方式获得焦点：

  1. 当用户切换到可聚焦元素时
  2. 当用户点击可聚焦元素时

可聚焦的元素包括：

  1. 链接（<a>）
  2. 按钮（<button>）
  3. 表单元素（input、textarea等）
  4. 元素tabindex

以下是需要注意的几个要点：

  1. 用户无法使用 Tab 键切换到元素tabindex="-1"，但可以点击该元素。点击操作会触发焦点。
  2. 在 Safari 和 Firefox (Mac) 上，点击不会聚焦<button>元素。更多信息请点击此处。
  3. 当您点击链接 ( <a>) 时，焦点会一直停留在该链接上，直到您从鼠标上移开手指。当您移开手指时，如果指向同一页面上的href有效链接，焦点就会重定向到其他位置。id

对于焦点，我们更关心用户选择元素而不是单击元素。

当用户点击 Tab 键时，他们不知道焦点会落到哪里。他们只能猜测。这就是为什么我们需要一个突出的改变来吸引用户的注意力到焦点元素上。

默认的焦点样式在大多数情况下都可以。如果你想设计自己的焦点，请考虑以下四点：

  1. 添加轮廓
  2. 创建带有运动的动画
  3. 改变background-color
  4. 改变color

由于background-color和color变化经常伴随:hover，因此轮廓或动画应该伴随是有意义的:focus。

您可以结合使用outline、border和属性来创建美观的焦点样式。我将在“创建自定义焦点样式box-shadow”中分享如何操作。

button {
  background-color: #dedede;
}

button:hover {
  background-color: #aaa;
}

button:focus {
  outline: none;
  box-shadow: 0 0 0 3px lightskyblue;
}
Enter fullscreen mode Exit fullscreen mode

使用 Tab 键选中按钮。选中后，会显示带有 box-shadow 的轮廓。

活动状态的样式

当你在现实生活中与事物互动时，你会期待某种反馈。例如，如果你按下一个按钮，你期望按钮被按下。

这种反馈在网站上也很有用。你可以使用 .触发器来设置与元素交互时“按下按钮”的样式:active。这里的交互指的是：:active

  1. 按住鼠标左键在一个元素上（即使是不可聚焦的元素）
  2. 按住空格键（在按钮上）
button:active {
  background-color: #333;
  border-color: #333;
  color: #eee;
}
Enter fullscreen mode Exit fullscreen mode

当用户按住鼠标左键在按钮上时，改变背景颜色和颜色。

需要注意两件奇怪的事情：

  1. 按住 Space 键会触发:active按钮，但按住 Enter 键则不会。
  2. 回车键会触发链接，但不会创建活动状态。空格键根本不会触发链接。

链接的默认样式

链接具有默认的活动样式。点击时，它们会变为红色。

默认情况下，点击链接时链接会变成红色。

主动性和专注力的关系

当你在可聚焦元素上按住鼠标左键时，会触发活动状态。同时，你还会触发聚焦状态。

释放鼠标左键时，焦点仍然停留在元素上

👆 适用于除链接和按钮之外的大多数可聚焦元素。

对于链接：

  1. 按住鼠标左键时：Firefox 和 Chrome 上的触发器:active和:focus状态仅在 Safari 上处于活动状态（仅在 Mac 上测试）
  2. 松开鼠标左键时：焦点:focus停留在链接上（如果链接的 与同一页面上href的 不匹配id）。在 Safari 上，焦点将返回到<body>。

对于按钮：

  1. 按住鼠标左键时：仅在 Chrome 上触发:active并显示状态。在 Safari 和 Firefox (Mac) 上完全:focus不触发。我在这里写过关于这种奇怪行为的文章。:focus

如果您希望点击时聚焦于按钮，则需要尽早添加此 JavaScript。（至于原因，您可以阅读我上面链接的文章了解更多信息）。

document.addEventListener("click", event => {
  if (event.target.matches("button")) {
    event.target.focus();
  }
});
Enter fullscreen mode Exit fullscreen mode

获得此代码后，按钮上的点击行为将变为：

  1. 按住鼠标左键时：:active所有浏览器均会触发。:focus但仅在 Chrome 浏览器中触发。
  2. 释放鼠标左键时：:focus在 Safari 和 Firefox（Mac）上触发。:focus在其他浏览器上仍保留按钮。

Safari 上的按钮行为。
添加上述 JavaScript 代码片段后，按钮在 Safari 上的行为。

现在您了解了悬停、焦点和活动状态，我想讨论一下这三种状态的样式。

神奇的组合

这个神奇的组合能让用户在鼠标悬停、聚焦以及与元素交互时获得反馈。以下是您需要的代码：

.element:hover,
.element:active {
  /* Change background/text color */
}

.element:focus {
  /* Show outline /*
}
Enter fullscreen mode Exit fullscreen mode

对于鼠标用户：

  1. 当用户将鼠标悬停在某个元素上时，background-color（和/或color）会发生变化。他们会得到反馈。
  2. 当用户点击某个元素时，焦点轮廓会显示出来。他们会得到反馈。

鼠标用户在悬停和点击时会收到反馈。

对于键盘用户：

  1. 当用户切换到某个元素时，焦点轮廓会显示出来。他们会得到反馈。
  2. 当他们与元素交互时，background-color（和/或color）会发生变化。他们会得到反馈。

键盘用户的焦点集中在 Tab 和交互上。

两全其美！

  1. 我还没有彻底测试过这个魔法组合。这只是一个概念验证。如果您能帮我测试一下并告诉我结果如何，我将不胜感激。
  2. 如果你要运行测试，不要使用 Codepen。Codepen上的链接焦点状态很奇怪。如果你将鼠标悬停在链接上，焦点轮廓就会被移除。为什么？我不知道。有时我觉得最好不要用任何花哨的工具来测试这类东西。就用普通的 HTML、CSS 和 JS 就好。

非魔法（但可能更好）的组合

正如我上面提到的，在 Safari 和 Firefox（Mac 版）中，点击按钮的行为有些奇怪。如果你添加了我展示的 JavaScript 代码片段，这个神奇的组合仍然有效。但这并不完美。

对于 Safari 和 Firefox (Mac)，会发生以下情况：

  1. 当用户按住鼠标按钮时，什么也不会发生改变。
  2. 当用户抬起鼠标按钮时，元素获得焦点

在 Safari 中点击按钮的行为。

如果你觉得这已经足够了，那么这个神奇的组合就成功了。你可以就此打住。

但如果您认为可供性不够，您可能希望分别设计:hover、:focus和:active。

.element:hover {
  /* Change background/text color */
}

.element:active {
  /* Another change in background/text color */
}

.element:focus {
  /* Show outline /*
}
Enter fullscreen mode Exit fullscreen mode

如果您设置了所有三种状态的样式，则 Safari 上的按钮行为。

就这样！希望你今天学到了一些东西！

感谢阅读。本文最初发布在我的博客上。如果您想阅读更多文章来帮助您成为更优秀的前端开发人员，请订阅我的新闻通讯。

鏂囩珷鏉ユ簮锛�https://dev.to/zellwk/style-hover-focus-and-active-states- Differently-5g4
Devto 翻译
PREV
理解 JavaScript 原型
NEXT
播种数据库