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

Posted 2023-03-06

【中文标题】在 iOS 设备中单击按钮后 CSS 悬停样式仍然存在

【英文标题】：CSS hover style remains after button click in iOS devices

【发布时间】：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上没有鼠标指针，因此没有“悬停”这样的概念。编辑标签。

【参考方案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;