Question

我在iPad上查看的页面有一些子链接...现在，当我点击任何这些链接时，我希望相应的链接处于活动状态，并且还可以阻止任何链接的悬停状态

我试过了

$("#leftNav  a").mouseleave(); 
$("#leftNav  a").mouseout(); 
$("#leftNav  a").trigger("mouseout"); 
$("#leftNav  a").trigger("mouseleave");

我也试过

var a=document.getElementsByClassName("searchBySub");                 
            for(var i=0;i<a.length;i++)                 
            {                         
            a[i].ontouchstart=function(e){
            console.log("ontouchstart5");
            e.preventDefault(); 
            return false;}                 
            }

在你说之前，没有在iPad上悬停，我知道这一点......但它确实适用于：悬停样式按照;

当用户通过单击它来关注元素时，：hover 应用样式和鼠标悬停，鼠标移动，mousedown，mouseup 并单击事件触发（始终;并按此顺序）。

所以问题是如何防止某些链接上的悬停状态，仅适用于iPad？我无法从CSS中删除：hover定义，因为同样的CSS也用于桌面。

Answer 1

您可以使用CSS媒体查询专门为iPad设置样式表，并覆盖之前的hover定义：

<link rel="stylesheet" href="#" media="only screen and (device-width: 768px)" />

我认为对于iPad 2，您将需要另一个媒体查询，其设备宽度加倍。

Answer 2

注意：未经过测试

首先创建一个用于检测用户是否使用iPad的功能。像这样：

$.isiPad = function(){
  return (navigator.platform.indexOf("iPad") != -1);
}

如果使用iPad，

删除所有链接上的hoovering类：

$(document).ready(function(){
   if($.isiPad())
   {
     $("a").hover(function(){
        $(this).addClass('your_a_class_when_not_hoovering');
     });
   }
});

如果您只想在某些链接上应用此功能，请执行以下操作：

 $(document).ready(function(){
   var apply_to_links = ['link_one_class_or_id','link_two_class_or_id']

  if($.isiPad())
   {
     $.each(apply_to_links,function(){
       $(this).hover(function(){
        $(this).addClass('your_a_class_when_not_hoovering');
       });
     })
   }
});

就像我说的那样没有经过测试但生病的想法让你明白了。希望它有所帮助！

Answer 3

不要使用：在出现问题的情况下悬停。使用类（'。hover'）并在.. hover

上设置该类

$(document).ready(function(){
   $("a").hover(function(){
      $(this).addClass('hover');
   }, function(){
     $(this).removeClass('hover');
});

正如您所指出的那样，在ipad上无法正常工作，这正是您想要的： - ）

防止iPad中的悬停状态

3 个答案: