Предотвратить зависание в 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 и click запускаются(всегда; и в таком порядке).

Итак, вопрос в том, как предотвратить состояние наведения на некоторых ссылках, только для iPad?Я не могу удалить определение: hover из CSS, так как тот же CSS также используется для рабочего стола.

Answer 1

Вы можете использовать медиазапросы CSS, чтобы установить таблицу стилей специально для iPad и переопределить определения: hover из более ранних:

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

Я предполагаю, что для iPad 2 вам понадобится еще один медиа-запрос с удвоенной шириной устройства.

Answer 2

Не используйте: зависать в ситуациях, когда это проблема.Используйте класс ('.hover') и установите этот класс на .. hover

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

, как вы заметили, это не работает на ipad, что именно то, что вы хотите: -)

Answer 3

Примечание: Не тестировалось

Сначала создайте функцию для определения, использует ли пользователь iPad. Вот так:

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

удалить класс пылесоса для всех ссылок при использовании iPad:

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

Как я и сказал, это не проверено, но я не думаю, что вы поняли. Надеюсь, это поможет!