CSS проблема на iPad

Question

У меня очень простой CSS связанный вопрос на iPad. У меня есть набор подссылок, каждая из которых определена в CSS как;

#leftNav .searchBySub {...}
#leftNav a.searchBySub:hover {...}
#leftNav .searchBySubClicked {...}

И у меня есть JS, где я определил

$("#leftNav  a.searchBySub").live("touchstart",function(){...}
$("#leftNav  a.searchBySub").live("click",function(){...}

Теперь мой вопрос: когда я нажимаю на любую из подссылок на iPad, почему к нему применяется CSS: hover state? Также я могу как-то изменить это поведение?

Пожалуйста, внимательно прочитайте вопрос, прежде чем делать какие-либо простые / базовые предложения, так как я уже попробовал основные исправления ..

Также перед тем, как вы скажете, на iPad нет события зависания, я знаю об этом, но в моем случае он применяет класс состояния: hover при нажатии на ссылку.

Я знаю, вы могли бы сказать, просто удалите определение: hover из CSS, но, к сожалению, я не могу этого сделать, так как тот же CSS используется и в настольных браузерах (и даже с медиа-запросами, это не помогает)

Итак, мой главный вопрос: как переопределить состояние: hover при нажатии на ссылку?

Обновлено ...

Ниже приведен код, который я пробовал;

    $("#leftNav  a.searchBySub").live("touchstart",function(){
                var a=document.getElementsByClassName("searchBySub");                 
                for(var i=0;i<a.length;i++)                 
                {                         
                a[i].ontouchstart=function(e){
 window.location=this.getAttribute("href");
                console.log("ontouchstart2");
                e.stopPropagation();                                 
                e.preventDefault(); 
                return false;}                 
                }
                $("#leftNav  a.searchBySub").removeClass("searchBySubClick");
                $(this).addClass("searchBySubClick");
                clickEvent($(this));
            });

Answer 1

Мобильные телефоны Safari обрабатывают событие в определенном порядке: при нажатии и отпускании экрана происходит следующее:

ontouchstart - onmouseover/:hover - mousedown - mouseup - click/:active

Обратите внимание, что onmouseout (конец состояния :hover) не будет вызываться, если вы не нажмете в другом месте. Мне понадобилось время, чтобы понять это.

В качестве обходного пути вы можете использовать этот вид кода для запуска ваших ссылок до того, как произойдет событие onmouseover.

        function ipadLinksHack()//Call it onload
        {
                var a=document.getElementsByTagName("a");
                for(var i=0;i<a.length;i++)
                {
                        //Note to self: ontouchstart and not onclick! :)
                        a[i].ontouchstart=function(e)
                        {
                                window.location=this.getAttribute("href");
                                e.stopPropagation();
                                e.preventDefault();
                                return false;//Prevents the link default behavior
                        }
                }
        }

Примечание : вы также можете использовать этот фрагмент, чтобы предотвратить открытие сафари, когда вы находитесь в «автономном режиме» (он же webapp) и нажимаете на ссылки. Это было главной целью этой функции. Также может помочь чтение руководства по обработке событий на официальном документе.

Answer 2

Посмотрите на функцию document.styleSheets[0].deleteRule() и просто удалите все правила, содержащие ": hover" относительно ссылок. Вот некоторые документы и некоторые примеры использования .

Будьте осторожны, так как сценарии псевдоэлементов кажутся ненадежными в большинстве браузеров, поэтому просто переберите таблицу стилей и удалите правила "a: hover".

Answer 3

Когда пользователь фокусируется на элементе одним нажатием на него, применяются стили: hover и события mouseover, mousemove, mousedown, mouseup и click запускаются (всегда; и в этом порядке).

Итак: наведение применяется даже на iOS. Не уверен, что iOS поддерживает: focus (или, может быть, active), но вы можете использовать его, чтобы «отменить» изменения, сделанные: hover.

Или используйте JS для вызова .blur () (не проверено).