为什么将悬停样式应用于移动设备上的水龙头？

Question

我的按钮在：hover上更改其颜色，请参阅：

button {
  background-color: orange;
}

button:hover {
  background-color: darkorange;
}

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

在台式机上效果很好，但是在移动设备上-：不应该悬停-浏览器*仍然会更改颜色，但是在之后触摸按钮。

1. 为什么会这样？我想念什么吗？是什么让人们认为在移动浏览器上实现（hover）（部分）有意义？
2. 是否有一个不错且干净的解决方案（最好没有Media Queries或JavaScript）？

*已在Chrome（“设备模式”）和iOS Safari中进行过测试。

Answer 1

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

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

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

我相信您会遇到这种问题，因为要在PC上单击某个按钮，您必须先将鼠标悬停在其上，因此单击该按钮后，移动设备上的颜色会更改。

更新我刚刚阅读了Temani Afif提出的问题下的评论：显然:hover在移动设备上已“转换”为:onclick之类的东西，因为缺少手机上的悬停功能。正如许多网站的悬停菜单上一样，移动用户如果不翻译就无法访问这些菜单。

您可以尝试的另一种方法是使用以下方法强制访问的链接的颜色：

a:visited { 
  color: orange!important;
}

更新2 包括了新的媒体标签，并从this answer获得了关于另一个问题的建议，并就如何不使用以及@media规则发表了评论。