CSS 触屏上的 hover 问题

触屏上的 CSS hover 问题。（Chrome Android）点击一下会选中可 hover 的文本。

从这篇文章^[1]找到一处 CodePen 演示 ^[2]。代码：

1
2
3
4
<button
  data-title="Hello guys!"
  data-help="My name is @tianheg"
>Subscribe</button>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
button {
  color: #333;
  font-size: 1.3rem;
  padding: 2rem;
  background-color: #eee;
  border: 1px solid #ddd;
  position: relative;
  transition: all ease 200ms;
}

@media (pointer: fine) {
  button:hover {
    color: #fff;
    border-color: #000;
    background-color: #333;
  }
  button:hover::after {
    top: 90%;
    background: #aaa;
    border-radius: 0.25rem;
    content: attr(data-title);
    position: absolute;
    font-size: 0.7rem;
    padding: 0.5rem 0.8rem;
    width: max(100%, 200px);
    max-width: max-content;
  }
}

@media (pointer: coarse) {
  button::after {
    content: attr(data-title);
    display: block;
    font-size: 0.75rem;
  }
  button:hover {
    color: #ddd;
    border-color: #aaa;
    background-color: #999;
  }
}

@media (pointer: none) {
  button::before, button::after {
    display: block;
    font-size: 0.75rem;
  }
  button::after {
    content: attr(data-title);
  }
  button::before {
    content: attr(data-help);
  }
}

我自己做的一个 Demo。

See the Pen Pointer Media Queries in CSS by tianheg (@tianheg) on CodePen.

当你在电脑上把鼠标移到区块上时，会出现 Hello guys! 字样；当你在触屏手机上查看时，会发现 Subscribe 下面会有 Hello guys! 字样。正好对应了我的 CSS 设置。

从 MDN 的这一页面^[3]可见 @media 下 pointer 的详细用法：

none 表示当前显示设备无指向装置
coarse 表示当前设备有不精确的指向装置，例如，触屏环境
fine 表示当前设备包含精确的指向装置

CSS 触屏上的 hover 问题

相关文章：