在 iOS 中点击表单按钮后,我遇到了 CSS 悬停样式卡住的问题。表单有一些输入字段,提交按钮有在焦点和悬停状态上定义的类。问题是当表单有任何无效选择并单击提交按钮时。在移动设备中,提交按钮的焦点以某种方式被锁定,并且应用了在焦点和悬停状态中定义的样式。这可以使用 chrome 响应模式并选择 iphone6 作为设备来检查。
在桌面上不会出现这个问题;单击前后按钮的样式相同,但在移动设备上不同。
.btnsubmit {
background-color: #000000;
border: 1px solid #000000;
color: #ffffff;
}
.btnsubmit:focus,
.btnsubmit:hover {
background-color: #ffffff;
color: #000000;
}
最佳答案
由于我刚刚遇到了同样的问题并以不同的方式解决了它,所以我将记录对我有用的方法。
现在,从媒体查询级别 4 开始,可以检测设备是否支持使用 CSS 媒体查询悬停 hover .
因此我只是将我的风格应用到这些设备上,我的问题就解决了。
a {
@media (hover: hover) {
&:hover {
color: red;
}
}
}
关于ios - 在 iOS 设备中单击按钮后,CSS 悬停样式仍然存在,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47507495/