Question

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

在桌面版中，此问题不会发生;之前的按钮样式＆amp;点击后是相同的，但在移动设备中它是不同的。

.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;
    }
  }
}

Answer 2

其他人知道了这一点。您将需要使用modernizr.js来实现。只需使用下面的CSS格式，然后将Javascript从此Codepen复制到您的网站上，然后悬停即可在iOS中正常运行：

https://codepen.io/vidhill/pen/bVxVrE

.no-touchevents .btnsubmit:hover {
    background-color: #ffffff; 
    color: #000000;
}

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

2 个答案: