触屏上的 CSS hover 问题。（Chrome Android）点击一下会选中可 hover 的文本。
<button
data-title="Hello guys!"
data-help="My name is @tianheg"
>Subscribe</button>
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。
<p class="codepen" data-height="230" data-default-tab="html,result" data-slug-hash="MWVVGbx" data-preview="true" data-editable="true" data-user="tianheg" style="height: 230px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
See the Pen Pointer Media Queries in CSS by tianheg (@tianheg) on CodePen.
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
当你在电脑上把鼠标移到区块上时，会出现 Hello guys!
字样；当你在触屏手机上查看时，会发现 Subscribe 下面会有 Hello guys!
字样。正好对应了我的 CSS 设置。
从 MDN 的这一页面3可见 @media 下 pointer 的详细用法：
none表示当前显示设备无指向装置coarse表示当前设备有不精确的指向装置，例如，触屏环境fine表示当前设备包含精确的指向装置