CSS :active 伪类在移动 Safari 中不起作用

在本文中，我们将介绍为什么在移动 Safari 浏览器中 CSS 的 :active 伪类不起作用，并提供一些解决方案。

阅读更多：CSS 教程

什么是 :active 伪类？

在 CSS 中，:active 是一种伪类选择器，用于选取当前用户正点击的元素。当用户按下鼠标左键或触摸屏幕上的元素时，这个元素就被激活，并且通过 :active 伪类可以为其应用样式。

伪类选择器可以通过 :active 表达式使用，例如：

a:active {
  color: red;
}

上述代码会在链接被点击的瞬间将链接的文本颜色改变为红色。

移动 Safari 中的问题

在移动 Safari 浏览器中，某些情况下 :active 伪类可能无法正常工作。这是因为移动 Safari 对 :hover 和 :active 伪类有一些特殊的处理。

在移动设备上，用户通常通过触摸屏幕来与页面交互。当用户触摸屏幕上的元素时，移动 Safari 会立即将其标记为 :active 状态，但这个状态只会在用户触摸开始的那一刻生效，并在触摸结束后立即取消。因此，如果你的样式仅仅适用于 :active 状态，用户可能无法看到效果。

举个例子，假设你要为按钮添加点击效果的样式：

button:active {
  background-color: lightgray;
}

在移动 Safari 中，当你点击按钮时，按钮的背景颜色会在点击瞬间改变为灰色，但立即恢复正常颜色，用户几乎无法察觉到 :active 状态的变化。

解决方案

为了解决移动 Safari 中 :active 伪类的问题，你可以使用 JavaScript 来添加或删除一个类，从而触发样式的改变。

首先，在 HTML 中为你需要添加点击效果的元素添加一个 touchstart 事件的监听器。当触摸开始时，我们添加一个类名为 “active” 的类；而当触摸结束时，我们移除这个类名。接下来，你可以使用 CSS 来为这个类名添加所需的样式。

举个例子，HTML 代码可以是这样的：

<button class="custom-button">点击我</button>

然后，添加 JavaScript 代码：

const button = document.querySelector('.custom-button');
button.addEventListener('touchstart', function(){
  button.classList.add('active');
});
button.addEventListener('touchend', function(){
  button.classList.remove('active');
});

最后，通过 CSS 添加样式：

.custom-button.active {
  background-color: lightgray;
}

现在，在移动 Safari 中，当你点击按钮时，按钮的背景颜色会在点击期间保持为灰色，用户可以清楚地看到 :active 状态的变化，这正是我们想要的效果。

总结

移动 Safari 浏览器中的 :active 伪类在用户点击瞬间会起作用，但立即取消。为了解决这个问题，我们可以利用 JavaScript 为元素添加或删除类名，并通过 CSS 为这个类名添加样式。这样，我们便可以在移动 Safari 中实现 :active 状态的效果。通过这种解决方案，我们可以更好地控制用户交互时的视觉效果，提升用户体验。