防止 iPad 中的悬停状态

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 样式；

当用户通过单击某个元素来聚焦该元素时，:hover 应用样式以及 mouseover、mousemove、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'）并将该类设置为 ..hover，

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

正如您所指出的，这在 ipad 上不起作用，这正是您想要的:-)