在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 媒体查询悬停来检测设备是否支持悬停。

因此，我只是在此类设备上应用了我的风格，我的问题就解决了。

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