ios - 在 iOS 设备中单击按钮后，CSS 悬停样式仍然存在

Question

在 iOS 中点击表单按钮后，我遇到了 CSS 悬停样式卡住的问题。表单有一些输入字段，提交按钮有在焦点和悬停状态上定义的类。问题是当表单有任何无效选择并单击提交按钮时。在移动设备中，提交按钮的焦点以某种方式被锁定，并且应用了在焦点和悬停状态中定义的样式。这可以使用 chrome 响应模式并选择 iphone6 作为设备来检查。

在桌面上不会出现这个问题；单击前后按钮的样式相同，但在移动设备上不同。

.btnsubmit {
    background-color: #000000;
    border: 1px solid #000000;
    color: #ffffff;
}
.btnsubmit:focus,
.btnsubmit:hover {
    background-color: #ffffff; 
    color: #000000;
}

代码笔:https://codepen.io/bhupendra1011/full/pdZmYV/

Answer 1

由于我刚刚遇到了同样的问题并以不同的方式解决了它，所以我将记录对我有用的方法。

现在，从媒体查询级别 4 开始，可以检测设备是否支持使用 CSS 媒体查询悬停 hover .

因此我只是将我的风格应用到这些设备上，我的问题就解决了。

a {
  @media (hover: hover) {
    &:hover {
      color: red;
    }
  }
}