CSS 将 :hover 改成移动设备的触摸/点击效果

在本文中，我们将介绍如何将 CSS 的 :hover 伪类效果转换为适用于移动设备的触摸或点击效果。当用户在电脑上使用鼠标时，可以通过悬停在元素上触发 :hover 效果，但在移动设备上没有鼠标，因此我们需要使用其他方式来触发相同的效果。

阅读更多：CSS 教程

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

一种常见的方法是使用 JavaScript 在移动设备上模拟 :hover 效果。我们可以通过添加事件监听器，捕获用户的触摸或点击操作，并在相应的元素上添加或移除 CSS 类来实现效果。

例如，以下是一个示例，它将在用户点击一个链接时在链接上添加一个 :hover 效果：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .link {
        color: blue;
        transition: color 0.3s;
      }

      .link:hover,
      .link.active {
        color: red;
      }
    </style>
  </head>
  <body>
    <a class="link" href="#">点击我</a>

    <script>
      var link = document.querySelector('.link');

      link.addEventListener('touchstart', function() {
        link.classList.add('active');
      });

      link.addEventListener('touchend', function() {
        link.classList.remove('active');
      });
    </script>
  </body>
</html>

在上面的示例中，我们在链接上定义了一个名为 “.link” 的 CSS 类。当鼠标悬停或链接被点击时，该类将被添加到链接上。通过使用 CSS 的过渡效果，我们可以实现从蓝色到红色的平滑颜色变化。在 JavaScript 部分，我们使用 “touchstart” 和 “touchend” 事件监听器来分别添加和移除 “.active” 类。

通过这种方式，我们可以在移动设备上实现类似于鼠标悬停的效果，让用户知道他们正在与某个元素进行交互。

使用 :active 伪类实现移动设备的点击效果

除了使用 JavaScript，我们还可以使用 CSS 的 :active 伪类来实现移动设备上的点击效果。:active 伪类可以在用户按下时为元素添加样式，并在释放时或点击外部区域时移除该样式。

以下是一个示例，它将在用户点击按钮时为按钮添加一个点击效果：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .button {
        padding: 10px 20px;
        background-color: blue;
        color: white;
        transition: background-color 0.3s;
      }

      .button:active {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <button class="button">点击我</button>
  </body>
</html>

在上面的示例中，我们定义了一个名为 “.button” 的 CSS 类，它表示按钮的样式。当按钮被按下时，使用 :active 伪类为按钮添加了一个红色的背景颜色。

这种方法比使用 JavaScript 更简单，但请注意，:active 伪类只在按钮被按下时起作用，当用户释放手指或点击其他地方时，:active 效果会消失。

使用 :target 伪类实现移动设备的点击效果

除了 :active 伪类，我们还可以使用 CSS 的 :target 伪类来实现移动设备上的点击效果。:target 伪类可以在页面 URL 中的锚点与元素的 ID 匹配时为元素添加样式。这意味着我们可以通过设置一个指向 ID 的 URL 锚点来触发 :target 伪类样式。

以下是一个示例，它将在用户点击导航链接时为对应的页面块添加一个点击效果：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .nav-link {
        color: blue;
        text-decoration: underline;
        transition: color 0.3s;
      }

      .page-block:target {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <nav>
      <a class="nav-link" href="#block1">页面块1</a>
      <a class="nav-link" href="#block2">页面块2</a>
      <a class="nav-link" href="#block3">页面块3</a>
    </nav>

    <div id="block1" class="page-block">页面块1的内容...</div>
    <div id="block2" class="page-block">页面块2的内容...</div>
    <div id="block3" class="page-block">页面块3的内容...</div>
  </body>
</html>

在上面的示例中，我们定义了一个导航菜单，每个菜单项都是一个链接，其中锚点通过与相应的页面块的 ID 匹配来触发 :target 伪类样式。当用户点击导航链接时，对应页面块的背景色将变为黄色。

通过这种方式，我们可以在移动设备上实现类似于点击导航链接的效果。

总结

通过 JavaScript、:active 伪类和 :target 伪类，我们可以将 CSS 的 :hover 效果转换为适用于移动设备的触摸或点击效果。使用 JavaScript 可以在移动设备上模拟 :hover 效果，并根据用户的触摸或点击操作来添加或移除相应的 CSS 类。而使用 :active 伪类可以快速实现点击效果，但需要注意添加的样式只在按钮被按下时起作用。另外，:target 伪类可以根据 URL 锚点与元素的 ID 匹配来触发点击效果，可以用于创建类似于导航链接的效果。