CSS 悬停样式和 iOS

Posted 2023-05-07

【中文标题】CSS 悬停样式和 iOS

【英文标题】：css hover styles and iOS

【发布时间】：2020-01-21 18:19:50

【问题描述】：

我正在开发一个 Web 应用程序，您可以在其中从一系列按钮中进行选择。当您将鼠标悬停在这些按钮上时，它们的样式会发生变化。我将此样式包装在 @media 查询中，以便在移动设备上没有悬停样式：@media not all and (pointer: coarse)。

我使用 Chrome 开发人员工具进行了测试，该工具可让您在桌面上查看网站的移动显示，并且在那里工作正常。部署我的更改后，有人在手机上查看它抱怨他们无法再取消选择按钮。但是，在更新到最新的 ios（我相信是 13）后，他的问题得到了解决。我检查了我的个人 iPhone (iOS 12.4.1)，我发现了这个问题。

另外，我询问的一位 android 用户没有遇到此问题。

早期版本的 iOS 和移动 CSS 样式是否存在问题？

【参考方案1】：

默认情况下，iOS 样式按钮。也许问题源于那里。 要覆盖它，您可以使用此 CSS：

button 
-webkit-appearance: none;
border-radius: 0;