CSS 移动设备上使用 :hover 作为切换效果

在本文中，我们将介绍如何在移动设备（例如手机或平板电脑）上使用 CSS 的 :hover 伪类选择器来实现切换效果。

阅读更多：CSS 教程

什么是 :hover 伪类选择器？

在 CSS 中，:hover 是一种伪类选择器，用于选取鼠标指针悬停在元素上时的状态。通常，在桌面设备上，当鼠标指针悬停在具有 :hover 选择器的元素上时，我们可以触发某些效果，比如改变背景颜色、改变文本颜色等。然而，在移动设备上，没有鼠标，我们该如何实现这样的效果呢？

在移动设备上模拟 :hover 效果

为了在移动设备上实现 :hover 效果，我们可以利用 CSS 和 JavaScript 的组合来达到我们希望的效果。下面是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50; /* 默认背景颜色 */
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  transition-duration: 0.4s; /* 过渡效果持续时间 */
}

.button:hover { /* 鼠标悬停时的效果 */
  background-color: #FF0000; /* 改变背景颜色 */
}
</style>
</head>
<body>

<button class="button">切换</button> <!-- 按钮元素 -->

<script>
// JavaScript 代码
var button = document.getElementsByClassName("button")[0]; // 获取按钮元素
button.addEventListener("touchstart", function(event) { // 在触摸开始时添加事件
  button.classList.toggle("active"); // 切换类名
});
</script>

</body>
</html>

在上面的示例中，我们创建了一个按钮元素，利用 CSS 设置了默认背景颜色和 :hover 时的背景颜色。然后，使用 JavaScript 监听触摸事件，并在触摸开始时切换按钮的类名。然后，我们可以利用 CSS 来实现根据按钮的类名改变样式的效果。

在这个示例中，我们通过添加类名 “active” 来切换按钮的样式。当按钮被点击后，它将添加类名 “active”，从而触发 :hover 选择器中定义的样式改变效果。再次点击按钮，它将删除类名，恢复到默认样式。

这种方法使我们能够在移动设备上模拟 :hover 效果，使其作为切换效果。