检测悬停功能

Question

:hover CSS伪类在触摸设备上不能很好地工作.悬停状态趋于持续直到触及其他东西.因此,在我们的网络应用程序中,我们使用Modernizr来检测具有触摸功能的浏览器/设备,并在这些情况下禁用悬停状态:

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

这在支持触摸屏和指针设备(例如鼠标或触摸板)的混合设备上成为问题.Modernizr检测到它是启用触摸的,并且在使用鼠标时没有任何悬停状态.

更有用的是检测鼠标或其他指针设备的存在而不是触摸屏.但是我找不到这样的东西.

有什么建议？

Answer 1

我知道这是一个老问题，但对于登陆这里的谷歌人来说，这个媒体查询将完成这项工作：

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

取自这个答案

Answer 2

您可以尝试 jQueries .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>

如果这不能像你想要的那样工作。我再想想其他办法吧！