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

【问题标题】：CSS hover style remains after button click in iOS devices在 iOS 设备中单击按钮后 CSS 悬停样式仍然存在
【发布时间】：2018-05-10 11:43:52
【问题描述】：

在 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/

【问题讨论】：

你能详细说明一下焦点被锁定了吗？
元素的焦点和悬停状态定义的样式被应用。验证后，提交按钮应用的样式与其在移动视图中的初始状态相比不同
mobile safari links retains focus after touch的可能重复
在 OP 中显示演示代码；请不要依赖 CodePen。这纯粹是一个 CSS 问题，与 jQuery Validate 完全无关，因为这个插件中没有任何东西可以控制按钮的样式。这只是在 iOS 中使用 :hover 的问题； iPhone / iPad上没有鼠标指针，因此没有“悬停”这样的概念。编辑标签。

标签： ios css forms button hover

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：