Question

：hover CSS伪类在触控设备上效果不佳。悬停状态趋于持续直到触及其他东西。因此，在我们的网络应用程序中，我们使用Modernizr来检测具有触摸功能的浏览器/设备，并在这些情况下禁用悬停状态：

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

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

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

有什么建议吗？

Answer 1

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

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

取自this answer

Answer 2

您可以尝试jQueries .mouseover（）。mouseenter（）。mouseout（）。_mouseleave（）

我不确定这是否能回答你的问题，但这是一种不同的方式来进行悬停并检测何时指示＆＃34;进入某事。你也可以使用媒体查询：将鼠标悬停在你的CSS中，我想，关闭它们。或者在用户屏幕大小的某个宽度处执行其他操作。 800px就像是ipad尺寸。下面是一些代码，我真的希望这个有用！

＆＃13;

$(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"});
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

检测悬停功能

2 个答案: