如果用户通过触摸设备访问我们的网站，我想忽略所有:hover CSS声明。因为:hover CSS没有意义，如果平板电脑在点击/点击时触发它，它甚至会令人不安，因为它可能会一直停留到元素失去焦点。说实话，我不知道为什么触屏设备觉得有必要触发:悬停在第一位——但这是现实，所以这个问题也是现实。
a:hover {
color:blue;
border-color:green;
/* etc. > ignore all at once for touch devices */
}
所以，(如何)我可以删除/忽略所有CSS:悬停声明在一次(而不必知道每一个)有他们声明后触摸设备?
当前回答
使用这个:https://jsfiddle.net/57tmy8j3/
如果你感兴趣的原因或其他选择，请继续读下去。
快速删除:使用JS的悬停样式
你可以使用Javascript删除所有包含:hover的CSS规则。这样做的优点是不需要接触CSS，甚至与旧的浏览器兼容。
function hasTouch() {
return 'ontouchstart' in document.documentElement
|| navigator.maxTouchPoints > 0
|| navigator.msMaxTouchPoints > 0;
}
if (hasTouch()) { // remove all the :hover stylesheets
try { // prevent exception on browsers not supporting DOM styleSheets properly
for (var si in document.styleSheets) {
var styleSheet = document.styleSheets[si];
if (!styleSheet.rules) continue;
for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {
if (!styleSheet.rules[ri].selectorText) continue;
if (styleSheet.rules[ri].selectorText.match(':hover')) {
styleSheet.deleteRule(ri);
}
}
}
} catch (ex) {}
}
限制:样式表必须托管在同一个域上(这意味着没有cdn)。在Surface或iPad Pro等混合鼠标和触摸设备上禁用悬停，这会损害用户体验。
仅css -使用媒体查询
把你所有的:hover规则放在一个@media块中:
@media (hover: hover) {
a:hover { color: blue; }
}
或者，重写你所有的悬停规则(与旧浏览器兼容):
a:hover { color: blue; }
@media (hover: none) {
a:hover { color: inherit; }
}
限制:仅适用于iOS 9.0+， Chrome for Android或Android 5.0+时使用WebView。hover: hover会破坏旧浏览器上的hover效果，hover: none需要覆盖之前定义的所有CSS规则。两者都不兼容混合鼠标和触摸设备。
最健壮的-通过JS和preend CSS检测触摸:悬停规则
这个方法需要在所有悬停规则前加上body.hasHover。(或您选择的类名)
body.hasHover a:hover { color: blue; }
hasHover类可以使用第一个例子中的hasTouch()添加:
if (!hasTouch()) document.body.className += ' hasHover'
然而，这与前面的混合触摸设备有相同的缺点，这将我们带到最终的解决方案。当鼠标光标移动时启用悬停效果，当检测到触摸时禁用悬停效果。
function watchForHover() {
// lastTouchTime is used for ignoring emulated mousemove events
let lastTouchTime = 0
function enableHover() {
if (new Date() - lastTouchTime < 500) return
document.body.classList.add('hasHover')
}
function disableHover() {
document.body.classList.remove('hasHover')
}
function updateLastTouchTime() {
lastTouchTime = new Date()
}
document.addEventListener('touchstart', updateLastTouchTime, true)
document.addEventListener('touchstart', disableHover, true)
document.addEventListener('mousemove', enableHover, true)
enableHover()
}
watchForHover()
这应该基本上适用于任何浏览器，并根据需要启用/禁用悬停样式。
这里是完整的例子——modern: https://jsfiddle.net/57tmy8j3/ 遗留(用于旧浏览器):https://jsfiddle.net/dkz17jc5/19/
其他回答
我也遇到过同样的问题(在我使用三星手机浏览器的情况下)，因此我偶然发现了这个问题。
感谢Calsal的回答，我发现了一些东西，我相信它将排除所有桌面浏览器，因为我尝试过的移动浏览器似乎都能识别它(参见编译表的截图:CSS指针特征检测表)。
MDN网络文档说明了这一点
指针CSS @media特性可用于应用基于的样式 用户的主要输入机制是否是指向设备，以及 如果是这样，它有多准确
.
我发现指针:coarse对于附件表中的所有桌面浏览器来说都是未知的，但是对于同一个表中的所有移动浏览器来说却是已知的。这似乎是最有效的选择，因为所有其他指针关键字值给出的结果都不一致。
因此，您可以像Calsal描述的那样构造一个媒体查询，但稍加修改。它使用了一种反向逻辑来排除所有的触摸设备。
Sass混合:
@mixin hover-supported {
/*
* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer
* coarse: The primary input mechanism includes a pointing device of limited accuracy.
*/
@media not all and (pointer: coarse) {
&:hover {
@content;
}
}
}
a {
color:green;
border-color:blue;
@include hover-supported() {
color:blue;
border-color:green;
}
}
CSS编译:
a {
color: green;
border-color: blue;
}
@media not all and (pointer: coarse) {
a:hover {
color: blue;
border-color: green;
}
}
我在研究这个问题后创建的这个要点中也描述了它。 代码依赖于实证研究。
更新(2018): 在撰写此更新时，2018-08-23，并由@DmitriPavlutin指出，这种技术似乎不再适用于Firefox桌面。
更新(2021): 有人向我指出，它似乎在Firefox 87中工作。
这可能不是一个完美的解决方案(它是用jQuery的)，但也许它是一个方向/概念的工作:如何反过来做呢?这意味着在默认情况下取消:hover css状态，并在文档的任何地方检测到鼠标移动事件时激活它们。当然，如果有人停用js，这是行不通的。还有什么会反对这样做呢?
也许是这样的:
CSS:
/* will only work if html has class "mousedetected" */
html.mousedetected a:hover {
color:blue;
border-color:green;
}
jQuery:
/* adds "mousedetected" class to html element if mouse moves (which should never happen on touch-only devices shouldn’t it?) */
$("body").mousemove( function() {
$("html").addClass("mousedetected");
});
2020解决方案- CSS只-没有Javascript
使用带有媒体指针的媒体悬停将帮助您解决此问题。在chrome Web和android手机上测试。我知道这个老问题，但我没有找到像这样的答案。
@media (hover: hover) and(指针:fine) { A:悬停{颜色:红色;｝ ｝ <a href="#" >Some Link</a>
使用这个:https://jsfiddle.net/57tmy8j3/
如果你感兴趣的原因或其他选择，请继续读下去。
快速删除:使用JS的悬停样式
你可以使用Javascript删除所有包含:hover的CSS规则。这样做的优点是不需要接触CSS，甚至与旧的浏览器兼容。
function hasTouch() {
return 'ontouchstart' in document.documentElement
|| navigator.maxTouchPoints > 0
|| navigator.msMaxTouchPoints > 0;
}
if (hasTouch()) { // remove all the :hover stylesheets
try { // prevent exception on browsers not supporting DOM styleSheets properly
for (var si in document.styleSheets) {
var styleSheet = document.styleSheets[si];
if (!styleSheet.rules) continue;
for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {
if (!styleSheet.rules[ri].selectorText) continue;
if (styleSheet.rules[ri].selectorText.match(':hover')) {
styleSheet.deleteRule(ri);
}
}
}
} catch (ex) {}
}
限制:样式表必须托管在同一个域上(这意味着没有cdn)。在Surface或iPad Pro等混合鼠标和触摸设备上禁用悬停，这会损害用户体验。
仅css -使用媒体查询
把你所有的:hover规则放在一个@media块中:
@media (hover: hover) {
a:hover { color: blue; }
}
或者，重写你所有的悬停规则(与旧浏览器兼容):
a:hover { color: blue; }
@media (hover: none) {
a:hover { color: inherit; }
}
限制:仅适用于iOS 9.0+， Chrome for Android或Android 5.0+时使用WebView。hover: hover会破坏旧浏览器上的hover效果，hover: none需要覆盖之前定义的所有CSS规则。两者都不兼容混合鼠标和触摸设备。
最健壮的-通过JS和preend CSS检测触摸:悬停规则
这个方法需要在所有悬停规则前加上body.hasHover。(或您选择的类名)
body.hasHover a:hover { color: blue; }
hasHover类可以使用第一个例子中的hasTouch()添加:
if (!hasTouch()) document.body.className += ' hasHover'
然而，这与前面的混合触摸设备有相同的缺点，这将我们带到最终的解决方案。当鼠标光标移动时启用悬停效果，当检测到触摸时禁用悬停效果。
function watchForHover() {
// lastTouchTime is used for ignoring emulated mousemove events
let lastTouchTime = 0
function enableHover() {
if (new Date() - lastTouchTime < 500) return
document.body.classList.add('hasHover')
}
function disableHover() {
document.body.classList.remove('hasHover')
}
function updateLastTouchTime() {
lastTouchTime = new Date()
}
document.addEventListener('touchstart', updateLastTouchTime, true)
document.addEventListener('touchstart', disableHover, true)
document.addEventListener('mousemove', enableHover, true)
enableHover()
}
watchForHover()
这应该基本上适用于任何浏览器，并根据需要启用/禁用悬停样式。
这里是完整的例子——modern: https://jsfiddle.net/57tmy8j3/ 遗留(用于旧浏览器):https://jsfiddle.net/dkz17jc5/19/
试试这个简单的2019 jquery解决方案，虽然它已经有一段时间了;
将这个插件添加到head: src = " https://code.jquery.com/ui/1.12.0/jquery-ui.min.js " 将此添加到js: 美元(“*”)。On ("touchend"，函数(e) {$(this).focus();});//应用于所有元素 一些建议的变化是: $(":输入:复选框,")。On ("touchend"，函数(e) {(this).focus);});/ /指定元素 美元(“*”)。On ("click, touchend"，函数(e) {$(this).focus();});//包含点击事件 Css: body{游标:指针;} //触摸任意位置结束焦点
笔记
将plugin放在bootstrap.js之前，以避免影响工具提示 仅在使用Safari或Chrome的iphone XR ios 12.1.12和ipad 3 ios 9.3.5上测试。
引用:
https://code.jquery.com/ui/
https://api.jquery.com/category/selectors/jquery-selector-extensions/
