Accidental Hover On Mobile

约 397 字大约 1 分钟

2023-08-10

在应用中，我们会使用 hover 效果向用户提供元素可点击或者出于活动状态的提示。这在具有鼠标或触控面板的设备来说表现良好，但是这在移动端的设备上， hover 效果可能会令人困惑。

.card:hover {
  background: blue;
}

在页面中滚动时，手指可能会意外地轻点半下，这将触发特定元素的 hover 状态。

如果是桌面端浏览器，请打开控制台，切换为移动设备。在下面元素上点击，会看到 hover 效果。

这种意外的触发了 hover 状态，可能不是用户想看到的，毕竟在移动设备上，并不需要 hover 。

对此，我们可以通过 hover 媒体查询，来解决这个问题。检测到用户当前的设备是否可以将鼠标指针悬停在元素上。

@media (hover: hover) {
  .card:hover {
    /* Add hover styles.. */
  }
}

如果是桌面端浏览器，请打开控制台，切换为移动设备。在下面元素上点击。

可以看到，在桌面端浏览器中，hover 效果被激活，在移动端浏览器中，不触发 hover 效果。