Мобильные сафари-ссылки сохраняют фокус после прикосновения

Моя навигация довольно проста. У меня есть состояние зависания, которое добавляет границу и прозрачный градиент png-фон к некоторому тексту, и дополнительный класс, который при добавлении jQuery добавляет цвет за это прозрачное изображение.

Если вы нажмете, чтобы переключить класс в веб-браузере, вы увидите, что цвет входит и выходит, но фоновое изображение остается, если вы никогда не отводите мышь от кнопки. Это ожидаемое поведение.

Моя проблема заключается в том, что при использовании iPad touch, похоже, сохраняет состояние зависания, и свойства: hover никогда не исчезают, если вы не нажмете еще одну кнопку, и в этом случае к этой кнопке добавятся свойства persive: hover, пока другая нажат.

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

Помощь?

Обычный - Hover - активный (через addClass())

Ответы

Ответ 1

Hover - это псевдо-класс CSS, предназначенный для работы с указателем не столько с событиями касания. Вы обычно хотели бы избежать использования наведения вообще, поскольку на мобильном телефоне нет никакого смысла. Один из самых простых способов справиться с этим - поместить ваш hover CSS внутри медиа-запроса. Вы можете сделать это, ориентируясь на планшеты или настольные экраны, вот два решения:

1- Ориентация iPads:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    RE.no-touch .my-element:hover {
         /* in here you cancel all hover styles you applied for desktop */ 
    }
}

2- Настольные компьютеры для таргетинга:

@media only screen 
and (min-width : 1224px) {
    RE.no-touch .my-element:hover {
         /* in here you apply hover styles that will only work on desktop */ 
    }
}

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

Ответ 2

Если вы используете Modernizr, класс no-touch будет добавлен в корневой элемент html для устройств без касания. Затем вы можете сделать это:

a.myclass {
   color:#999;
}

.no-touch a.myclass:hover,
a.myclass:active {
   color:#ccc;
}

Ответ 3

Вот как я исправил его для своего списка с помощью наведения:

CSS

ul {background-color:#f3f3f3;}
li:hover {background-color: #e7e7e7}

JQuery

$(document).ready(function () {
    $('li').on('touchstart', function () { $(this).css('background-color', ''); });
    $('li').on('touchend', function () { $(this).css('background-color', 'inherit'); });
});

И исправление для наведения на задний ход навигации...

<body onunload="$('a').blur();">

или

$(window).unload( function () { $('a').blur(); } );

Для непосвященных событие разгрузки происходит непосредственно перед тем, как браузер покинет страницу. Размывая все ссылки на странице при разгрузке, я смог отменить наведение. Возврат к исходной странице с помощью кнопки "Назад" показывает ссылку на клик в состоянии по умолчанию.

К сожалению, событие onclick, похоже, не вызывает выгрузку, но обновление происходит в iOS 5?!

Stuck On: hover - http://www.aaronpinero.com/articulated/2011/05/28/stuck-on-hover/ Использовать jQuery для замены - http://www.nerdboy.co.uk/2009/01/use-jquery-to-replace-body-onunload/

Ответ 4

Я столкнулся с этой проблемой. Моя проблема была на iPad, если я постучал якорем и немного прокрутился, событие щелчка не срабатывало, но элемент сохранил бы состояние CSS наведения. Я убежден, что iPad действительно сохранил состояние фокусировки и применяет стили CSS: hover, чтобы имитировать работу на рабочем столе.

Не-JS и практическое обходное решение - не доставлять стили наведения для прикосновения к устройствам, если они не нужны. Сенсорные устройства не имеют "реального" состояния зависания, однако, похоже, он отображается, когда элемент сфокусирован или прослушивается и прокручивается.

Итак, с Modernizr.js загружен, я переместил стили hover в область .no-touch -

то есть.

/* Only deliver hover styles to non-touch devices */
.no-touch .my-element:hover {
  /* hover styles */
}

Затем, когда элемент щелкнут, я переключу на него активный класс.

.my-element.active {
  /* active styles */
}

Единственным отрицательным выводом является то, что вы не получаете "состояние прослушивания". Я еще не исследовал решение для этого, поскольку это не очень важно для моих приложений.

Ответ 5

вам нужно поймать следующие события

touchstart - когда ваш палец касается экрана

touchhend - когда ваш палец покидает экран

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

$('element').on('touchstart', function(){
    // apply hover styles, or better yet addClass() of hover styles
});

$('element').on('touchend', function(){
    // removeClass or remove styles, in here you set it to default so even if it is focused, it makes no difference
});

Дайте некоторый пример кода, сенсорный старт и конец должны решить проблему.

Ответ 6

Если вы используете SCSS, я рекомендую вам сделать следующее:

// primary-buttons
.primary-button, .primary-button:visited,
.primary-button:focus {
    background: red;
    color: white;
}

.primary-button:hover {
    background: green; // Only for big screens
    @media(max-width: 768px) {
        background: red;
    }
}

Если вы сбросите значение фона до начального значения, у вас больше не будет проблем с нажатием кнопки на устройствах с разрешением <= 768 пикселей

Ответ 7

Это обходное решение:

var btn = jQuery(".nav-menu ul li:first");
var btn_new = btn.clone(true);
btn.remove();
jQuery(".nav-menu ul").append(btn_new);