检测悬停功能能力

Question

:hover CSS 伪类在触摸设备上表现不佳，悬停状态会一直保持直到触摸其他区域。因此，在我们的 Web 应用程序中，我们使用 Modernizr 来检测具有触摸功能的浏览器/设备，并在这些情况下禁用悬停状态：

.no-touch .button:hover { ... }

这在支持触摸屏和指针设备（例如鼠标或触摸板）的混合设备上会成为问题。Modernizr 检测到它具有触摸功能，并且当使用鼠标时，没有任何悬停状态起作用。

更有用的是检测鼠标或其他指针设备的存在而不是触摸屏。但我无法找到任何类似的东西。

有什么建议吗？

- elmonty

---

甚至不需要混合设备。Android支持鼠标和USB OTG，因此您可以轻松地将普通鼠标连接到您的手机/平板电脑上，并获得完全功能的鼠标指针。 - Marc B

这不是问题所在。我想知道如何检测浏览器/设备是否有鼠标指针，以便启用:hover伪类。 - elmonty

非常好和简单的问题，似乎（对我来说也是如此），没有真正令人满意的答案。无论如何，对于我来说，使用Modernizr似乎是不可行的，恰恰因为混合设备让用户随时自由决定使用其中之一。 - Garavani

那么这个问题还没有解决吗？在我看来，这是一个非常重要和普遍的问题。我需要能够适应不同客户端的能力来适应我的网站。 - Neonit

Answer 1

我知道这是一个老问题，但对于来到这里的谷歌用户，这个媒体查询可以完成这项工作：

@media not all and (hover: none) {
  .hoverspecificstyles:hover {
    display: block;
  }
}

来自这个答案

- Dan Ott

Answer 2

你可以尝试使用jQuery的.mouseover()、.mouseenter()、.mouseout()和.mouseleave()方法。我不确定这是否回答了你的问题，但这是一种不同的处理悬停事件并检测“指针”何时进入某个元素的方式。此外，你可以在CSS中使用媒体查询来处理:hover，并且可以在特定屏幕宽度下关闭它们，或者在用户屏幕大小为800px（例如iPad）以下时执行其他操作。以下是一些代码，我真心希望它能起作用！

$(document).ready(function(){ 
  $(".box").mouseover(function(){
    var duhbox = $(".box").addClass("black");
    duhbox.animate({borderRadius: "50px"});
  });
  $(".box").mouseout(function(){
    var goBack = $(".box").removeClass("black");
    goBack.animate({borderRadius: "0px"});
  });
});

.box{
  height: 150px;
  width:  150px;
  background-color: royalblue;
  border: 1px solid black;
}

.black{
  background-color: black;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box'></div>

如果这不像你想要的那样工作，我会想到其他的方法！

- Michael Barreiro

---

我知道如何对悬停做出反应。我想知道的是如何检测浏览器/设备是否具有显示鼠标指针的能力，因此可以正确地悬停（例如，不是粘性悬停）。 - elmonty

mouseover事件和mouseout事件是由触摸触发的，您不能依赖它们来编写桌面特定的行为。 - tavoyne