为啥在移动设备上点击时会应用悬停样式？

Posted 2023-05-08

技术标签:

【中文标题】为啥在移动设备上点击时会应用悬停样式？【英文标题】：Why are hover styles applied on tap on mobile devices?为什么在移动设备上点击时会应用悬停样式？ 【发布时间】：2019-12-06 21:37:23 【问题描述】：

我的按钮在 :hover 上会改变颜色，请参阅：

button 
  background-color: orange;


button:hover 
  background-color: darkorange;

示例：https://jsfiddle.net/oepb5ks4/

在桌面上效果很好，但在移动设备上 - :hover 不应该存在 - 浏览器* 仍然会改变颜色，但在触摸按钮之后。

javascript

*在 Chrome（“设备模式”）和 ios Safari 中测试。

【问题讨论】：

这个已知的悬停是通过点击激活的。想象一下，您创建了一个菜单，其中包含悬停时显示的子项，在移动设备上它将被点击在移动设备上，当你点击时，悬停被激活，如果你在按钮或其他有悬停状态的东西上“传递手指”，悬停也被激活，所以悬停也存在于移动设备上。 【参考方案1】：

在您的 CSS 中，您可以使用 @media 规则和过滤器 (documentation at w3) 过滤移动设备。您可以声明“如果媒体具有悬停功能，则悬停颜色应为橙色”：

@media not all and (hover: none) 
    a:hover
        color: orange

您也可以尝试detect it with JS 并手动将颜色调整为在移动设备上始终为橙色。

我相信你的问题是因为要点击PC上的按钮，你必须先将鼠标悬停在它上面，所以点击它后，移动设备上的颜色会发生变化。

更新我刚刚阅读了 Temani Afif 问题下的评论：显然 :hovers 在手机上“转换”为类似 :onclick 的东西，因为手机上没有悬停功能.许多网站都有悬停菜单，移动用户如果不翻译就无法访问这些菜单。

您可以尝试的另一件事是使用以下命令强制访问链接的颜色：

a:visited  
  color: orange!important;

更新 2 包含了新的媒体标签，并就另一个问题听取了 this answer 的建议，并评论了如何使用 not 和 @media 规则。

【讨论】：

可能比使用屏幕宽度更好的是检查是否存在悬停：@media (hover: none) ... @kraftwer1 你能确认这行得通吗？如果是这样，我会将其包含在我的答案中。它似乎在除 IE11 之外的任何地方都可以工作 :-) caniuse.com/#feat=css-media-interaction