Tianhe Gao

CSS 触屏上的 hover 问题

04 Aug, 2022

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

从这篇文章¹找到一处 CodePen 演示 ²。代码：

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

 1    button {
 2      color: #333;
 3      font-size: 1.3rem;
 4      padding: 2rem;
 5      background-color: #eee;
 6      border: 1px solid #ddd;
 7      position: relative;
 8      transition: all ease 200ms;
 9    }
10
11    @media (pointer: fine) {
12      button:hover {
13        color: #fff;
14        border-color: #000;
15        background-color: #333;
16      }
17      button:hover::after {
18        top: 90%;
19        background: #aaa;
20        border-radius: 0.25rem;
21        content: attr(data-title);
22        position: absolute;
23        font-size: 0.7rem;
24        padding: 0.5rem 0.8rem;
25        width: max(100%, 200px);
26        max-width: max-content;
27      }
28    }
29
30    @media (pointer: coarse) {
31      button::after {
32        content: attr(data-title);
33        display: block;
34        font-size: 0.75rem;
35      }
36      button:hover {
37        color: #ddd;
38        border-color: #aaa;
39        background-color: #999;
40      }
41    }
42
43    @media (pointer: none) {
44      button::before, button::after {
45        display: block;
46        font-size: 0.75rem;
47      }
48      button::after {
49        content: attr(data-title);
50      }
51      button::before {
52        content: attr(data-help);
53      }
54    }