我的导航很简单。我有一个悬停状态，它为某些文本添加了边框和透明渐变 png 背景，还有一个附加类，当由 jQuery 添加时，它会在该透明图像后面添加颜色。
如果您在网络浏览器中单击以切换类，您会看到颜色进出，但如果您从不将鼠标从按钮上移开，则背景图像会保留。这是预期的行为。
我的问题是，当使用 iPad 时，触摸似乎保持悬停状态，并且 :hover 属性永远不会消失，除非您单击另一个按钮，在这种情况下，持久性 :hover 属性会添加到该按钮，直到另一个按钮按下。
我无法想象我是第一个遇到这个问题的人，但是搜索没有发现任何问题。
帮助？
正常 - 悬停 - 活动（通过 addClass() ）
【问题讨论】：
标签： jquery css ipad mobile-safari
如果您使用的是 Modernizr，则非触控类将添加到非触控设备的根 html 元素中。然后你可以这样做：
a.myclass {
color:#999;
}
.no-touch a.myclass:hover,
a.myclass:active {
color:#ccc;
}
【讨论】：
Hover 是一个 CSS 伪类，旨在使用指针而不是触摸事件。您通常希望完全避免使用悬停，因为它在移动设备上毫无意义。处理此问题的最简单方法之一是将悬停 CSS 放在媒体查询中。您可以通过定位平板电脑或桌面屏幕来做到这一点，这里有两种解决方案：
1- 定位 iPad：
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
RE.no-touch .my-element:hover {
/* in here you cancel all hover styles you applied for desktop */
}
}
2- 定位桌面：
@media only screen
and (min-width : 1224px) {
RE.no-touch .my-element:hover {
/* in here you apply hover styles that will only work on desktop */
}
}
任何一种方式都有效。如果您注意到 CSS 在某些设备中被错误触发，您可以更改最小和最大宽度的值。
【讨论】：
min-device-width，所以它仍然可以在浏览器窗口减少的桌面上工作。
这是一篇旧帖子，但我在 2019 年的今天一直在努力解决这个问题，我找到了这个干净的解决方案，我想与大家分享。
<a href="#">Try hovering over me!</a>
@media (any-hover: hover) {
a:hover {
background: yellow;
}
}
基本上我们在这里所做的是在任何具有指针机制的设备中使用悬停。现在有一些带有 html 阅读器的软件可以更好地访问网站，这不应该是一个好主意，停用所有移动设备的 :hover。 需要说明的是，任何没有指向机制的设备悬停都不会生效，否则我们应用了 :hover 样式。
【讨论】：
这就是我通过悬停为我的列表修复它的方法：
CSS：
ul {background-color:#f3f3f3;}
li:hover {background-color: #e7e7e7}
jQuery:
$(document).ready(function () {
$('li').on('touchstart', function () { $(this).css('background-color', ''); });
$('li').on('touchend', function () { $(this).css('background-color', 'inherit'); });
});
并修复了鼠标悬停在返回按钮导航上的问题...
<body onunload="$('a').blur();">
或
$(window).unload( function () { $('a').blur(); } );
对于初学者来说，卸载事件发生在浏览器离开页面之前。通过在卸载时模糊页面中的所有链接，我能够解除悬停状态。使用返回按钮返回原始页面会显示默认状态下单击的链接。
不幸的是，onclick 事件似乎不会触发卸载，但在 iOS 5 中刷新会触发？！
卡住 :hover - http://www.aaronpinero.com/articulated/2011/05/28/stuck-on-hover/ 使用jQuery替换-http://www.nerdboy.co.uk/2009/01/use-jquery-to-replace-body-onunload/
【讨论】：
pagehide。
我也遇到过这个问题。我的问题出在 iPad 上，如果我点击锚点并稍微滚动，点击事件不会触发，但元素会保留悬停状态 CSS。我认为 iPad 实际上保留了焦点状态并应用 :hover CSS 样式来模拟桌面体验。
一种非 JS 且实用的解决方法是在不需要时不向触摸设备提供悬停样式。触摸设备没有“真正的”悬停状态，但是当元素被聚焦或点击并滚动时，它似乎是模拟悬停。
因此，在加载了 Modernizr.js 后，我将悬停样式移到了 .no-touch 的范围内 -
即
/* Only deliver hover styles to non-touch devices */
.no-touch .my-element:hover {
/* hover styles */
}
然后，当单击该元素时，我将在其上切换一个活动类。
.my-element.active {
/* active styles */
}
唯一的负面影响是您没有获得“被点击状态”。我还没有研究解决方案，因为它对我的应用程序并不重要。
【讨论】：
:active 选择器。
你需要捕捉以下事件
touchstart - 当您的手指触摸屏幕时
touchend - 当你的手指离开屏幕时
想象一下悬停和取消悬停，如果您可以发布一些代码，如果您不明白我在说什么，我们可以为您提供更多帮助
$('element').on('touchstart', function(){
// apply hover styles, or better yet addClass() of hover styles
});
$('element').on('touchend', function(){
// removeClass or remove styles, in here you set it to default so even if it is focused, it makes no difference
});
给出一些示例代码，touchstart和end应该可以解决问题
【讨论】：
如果您使用的是 SCSS，我建议您执行以下操作：
// primary-buttons
.primary-button, .primary-button:visited,
.primary-button:focus {
background: red;
color: white;
}
.primary-button:hover {
background: green; // Only for big screens
@media(max-width: 768px) {
background: red;
}
}
如果您将背景的值重置为初始值，您将不再遇到在设备上按下按钮的问题
【讨论】：
这是一种解决方法：
var btn = jQuery(".nav-menu ul li:first");
var btn_new = btn.clone(true);
btn.remove();
jQuery(".nav-menu ul").append(btn_new);
【讨论】：