检测悬停是否存在或可用答案

【问题标题】：Detect if Hover Exists or Is Available检测悬停是否存在或可用
【发布时间】：2014-06-26 18:21:53
【问题描述】：

长期以来，每个人都在推动特征检测。我想检测访问者的浏览器是否支持 :hover 伪类。我的理解是，即使不是大多数，也不支持悬停的移动设备已经足够多，所以我想相应地装备我的事件监听器。但是如果没有移动检测，我不确定如何实现这一点，而且到目前为止我还没有通过 Google 或 SO 找到任何东西。

可能类似于问题#8981463

$(function() {
  var canHover = $(document).is(":hover");
});

我要到下周才能在移动设备上对此进行测试。

想法？

【问题讨论】：

我不确定这是否会有所帮助，但是，我会将它们都留在这里供您查看：api.jquerymobile.com/vmouseover、izilla.com.au/git/jquery.izilla.touchMenuHover.html、prowebdesign.ro/how-to-deal-with-hover-on-touch-screen-devices、forum.jquery.com/topic/…、
再次：为什么要检测hover-ability？一般来说，判断它是否是移动设备？要禁用移动设备的悬停功能？
希望这是有道理的，但我有一些小的美学事件在悬停在可点击（菜单）按钮上时触发。但我的兄弟让我知道他们的观众主要是基于移动设备的。我可以调整代码以更好地适应移动设备，但是对于非移动设备来说它变得有点奇怪，例如必须单击两次按钮才能激活它，或者单击按钮以获取下拉菜单。如果我检测到悬停能力，我仍然可以允许非移动用户悬停，这是更符合预期的行为。
听起来像悬停会显示一些动画（在按钮上或旁边）。或者你显示一种子菜单？您可能会完全改变移动用户网站的可用性，因为他们有完全不同的需求（不浪费空间、无干扰的内容和导航、节省电池、在较慢的网络上缩短加载时间……）。例如，仅出于审美原因的动画可能是无趣的（如果网站并非全部关于该动画）。
几个月前我问了一个类似的问题，有一个plugin

标签： javascript jquery css

【解决方案1】：

没有is(':hover')，您无法使用 javascript 检测 CSS 伪类，因为它们不是 DOM 的一部分。

但是，您可以检测某些仅在触摸屏上可用的事件并采取相应措施，modernizer 会这样做

if ('ontouchstart' in document.documentElement) {
  document.documentElement.classList.add('touch');
} else {
  document.documentElement.classList.add('no-touch');
}

它向<html> 元素添加类，告诉您设备是否有触摸屏，因此您可以在 CSS 中执行类似的操作

.no-touch .element:hover {color: red;} // for users with a mouse
.touch .element {color: blue;} // for touch devices

【讨论】：

感谢您的意见，Adeneo。感谢您避免建议我实施现代化程序等，因为这是一个小站点，我宁愿不必为了一个检测目的而实施它。但是，如果一切都失败了……我可能需要走那条路。但是您的上述建议看起来很有希望。
您可以同样轻松地创建整个代码；只需在用户打开页面时进行检查。例如，当某人只是将鼠标悬停在页面主体上时。如果一个人悬停在身体上，那么您就知道该用户具有悬停功能。然后，您可以为每个要检查的对象是否具有悬停类。

【解决方案2】：

睡不着，可能已经想通了，至少可能是针对我的特殊情况。我在这些按钮上使用精灵，并且我已经在其他地方进行精灵位置检查。我的想法是单击按钮时，在触发之前，它还可以进行精灵位置检查。如果没有为单击的按钮重新定位精灵，它似乎不是一个可悬停的设备，我可以将单击视为 2 部分激活的第一个。我今天早些时候读到一些移动设备已经这样做了，因为它们将第一次点击视为悬停。

我的精灵定位逻辑就是这样，也许可以在按钮的点击触发事件之前调用：

if ($(elem).css('background-position').indexOf('76px') >= 0 ) {

【讨论】：

请注意，background-position-y 是非标准的，不是任何 CSS 规范的一部分，因此不能保证浏览器会支持它，我认为 Firefox 也不支持。
@adeneo，你说得很对，所以我会在'background-position'上做一个indexOf，它确实会报告回来，但比这更糟糕。 FF 没有报告新的悬停位置，而是提供了初始位置。我需要检查一下，也许是事件排序问题，但希望这种方法的概念能够奏效。如果没有，我会遵从您的“ontouchstart”方法。我会期待这个周末回来报告。再次感谢您的洞察力。
我相信使用我的精灵位置检测，虽然可能需要更多的 JS 工作，但也可以让用户在触摸屏设备上使用鼠标。如果使用鼠标，:hover 伪类将改变背景位置。如果按钮被单击，并且位置不是根据 :hover 伪类应有的位置，我可以直接更改位置，然后触发 'mouseenter' 监听器。如果按钮被点击并且位置正确，那么要么是鼠标点击了一次，要么是触摸屏已经点击了一次。
不确定何时发生，但现在所有浏览器都支持此属性。 developer.mozilla.org/en-US/docs/Web/CSS/…

【解决方案3】：

现在有一个得到很好支持的媒体查询来检测是否支持 hover： https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover

您可以与 Window.matchMedia 一起使用： https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

然后你会使用：

if (window.matchMedia( "(hover: none)" ).matches) {
   // hover unavailable
}

【讨论】：

如果您想在您的 javascript 和 CSS 之间保持一致，这是一个很好的选择。此外，现在完全支持交互媒体查询：caniuse.com/#feat=css-media-interaction。