防止iPad的悬停状态

Prevent hover state in iPad

本文关键字：状态 悬停 iPad 防止      更新时间：2023-09-26

我有一些在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样式。

当用户将焦点放在一个元素上时，鼠标悬停样式被应用，鼠标悬停，鼠标移动，鼠标向下，鼠标向上点击事件触发(always;

问题是我如何防止一些链接的悬停状态，仅适用于iPad ?我不能从CSS中删除:hover定义，因为桌面也使用相同的CSS。

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

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

我认为对于iPad 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');
       });
     })
   }
});

就像我说的，它没有经过测试，但我想你明白了。希望能有所帮助!

不要在有问题的情况下使用:hover。使用一个类('.hover')并将该类设置为…悬停

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

正如你所注意到的，这在ipad上不起作用，这正是你想要的:-)

相关文章：