Можно ли принудительно игнорировать псевдокласс: hover для пользователей iPhone / iPad?

Question 1

У меня есть несколько меню css на моем сайте, которые расширяются с помощью :hover(без js)

Это работает частично на iDevices, например, касание активирует :hoverправило и расширяет меню, но затем касание в другом месте не удаляет :hover. Также, если есть ссылка внутри элемента, который является :hover'ed, вам нужно дважды нажать, чтобы активировать ссылку (первое :hoverнажатие запускает ссылку, второе нажатие запускает ссылку).

Я смог заставить все работать на iphone, привязав touchstartсобытие.

Проблема в том, что иногда мобильное сафари по-прежнему выбирает запуск :hoverправила из CSS, а не из моих touchstartсобытий!

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

Есть ли способ динамически «отменять» :hoverправила для определенных элементов, когда пользователь находится в мобильном сафари?

Посмотрите и сравните поведение iOS здесь: http://jsfiddle.net/74s35/3/ Примечание: только некоторые свойства css вызывают поведение при двух щелчках, например display: none; но не фон: красный; или текст-украшение: подчеркивание;

Question 2

Я обнаружил, что ": hover" непредсказуемо в iPhone / iPad Safari. Иногда нажатие на элемент делает этот элемент «: hover», а иногда он перемещается к другим элементам.

В настоящее время у меня просто класс «без прикосновения» к телу.

<body class="yui3-skin-sam no-touch">
   ...
</body>

И иметь все правила CSS с ": hover" ниже ".no-touch":

.no-touch my:hover{
   color: red;
}

Где-то на странице у меня есть javascript для удаления класса без касания из тела.

if ('ontouchstart' in document) {
    Y.one('body').removeClass('no-touch');
}

Это не выглядит идеально, но все равно работает.

Question 3

:hoverздесь не проблема. Safari для iOS следует очень странному правилу. Он срабатывает mouseoverи mousemoveпервым; если что-то изменится во время этих событий, событие click и связанные с ним события не будут запущены:

mouseenter и mouseleave кажутся включенными, хотя в таблице они не указаны.

Если вы измените что-либо в результате этих событий, события щелчка не будут запускаться. Это включает что-то более высокое в дереве DOM. Например, это предотвратит работу вашего веб-сайта с помощью jQuery с помощью одиночных кликов:

$(window).on('mousemove', function() {
    $('body').attr('rel', Math.random());
});

Изменить: для пояснения hoverсобытие jQuery включает в себя mouseenterи mouseleave. Они оба предотвратить , clickесли содержание изменяется.

Question 4

Библиотека обнаружения функций браузера Modernizer включает проверку событий касания.

По умолчанию он применяет классы к вашему элементу html для каждой обнаруженной функции. Затем вы можете использовать эти классы для стилизации вашего документа.

Если сенсорные события не включены, Modernizr может добавить класс no-touch:

<html class="no-touch">

А затем используйте этот класс для ваших стилей наведения:

.no-touch a:hover { /* hover styles here */ }

Вы можете скачать кастомную сборку Modernizr будет включать в себя как можно меньше или столько функций, сколько вам нужно.

Вот пример некоторых классов, которые можно применить:

<html class="js no-touch postmessage history multiplebgs
             boxshadow opacity cssanimations csscolumns cssgradients
             csstransforms csstransitions fontface localstorage sessionstorage
             svg inlinesvg no-blobbuilder blob bloburls download formdata">

Question 5

Некоторые устройства (как говорили другие) имеют события касания и мыши. Microsoft Surface, например, имеет сенсорный экран, трекпад И стилус, который фактически вызывает события наведения при наведении курсора на экран.

Любое решение, которое отключается :hoverиз-за наличия событий касания, также повлияет на пользователей Surface (и многие другие подобные устройства). Многие новые ноутбуки сенсорные и будут реагировать на сенсорные события, поэтому отключение зависания - действительно плохая практика.

Это ошибка Safari, такому ужасному поведению нет абсолютно никаких оправданий. Я отказываюсь саботировать браузеры, отличные от iOS, из-за ошибки в iOS Safari, которая, по-видимому, существует уже много лет. Я очень надеюсь, что они исправят это для iOS8 на следующей неделе, но пока ....

Мое решение :

Некоторые уже предлагали использовать Modernizr, ну, Modernizr позволяет создавать свои собственные тесты. По сути, я здесь «абстрагирую» идею браузера, который поддерживает, :hoverв тест Modernizr, который я могу использовать в своем коде без жесткого кодирования if (iOS).

 Modernizr.addTest('workinghover', function ()
 {
      // Safari doesn't 'announce' to the world that it behaves badly with :hover
      // so we have to check the userAgent  
      return navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? false : true;
 });

Тогда css становится примерно таким

html.workinghover .rollover:hover 
{
    // rollover css
}

Только на iOS этот тест завершится ошибкой и отключит опрокидывание.

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

Question 6

Добавление библиотеки FastClick на вашу страницу приведет к тому, что все нажатия на мобильном устройстве будут преобразованы в события щелчка (независимо от того, где пользователь нажимает), поэтому это также должно решить проблему зависания на мобильных устройствах. Я отредактировал вашу скрипку в качестве примера: http://jsfiddle.net/FvACN/8/ .

Просто включите библиотеку fastclick.min.js на свою страницу и активируйте ее через:

FastClick.attach(document.body);

В качестве дополнительного преимущества это также устранит раздражающую задержку onClick в 300 мс, от которой страдают мобильные устройства.

Есть несколько незначительных последствий использования FastClick, которые могут иметь или не иметь значения для вашего сайта:

Если вы нажмете где-нибудь на странице, прокрутите вверх, прокрутите назад вниз, а затем отпустите палец в том же месте, где вы его изначально поместили, FastClick интерпретирует это как «щелчок», хотя это явно не так. По крайней мере, так это работает в версии FastClick, которую я сейчас использую (1.0.0). Кто-то, возможно, исправил проблему с этой версии.
FastClick убирает возможность "двойного щелчка".

Question 7

Лучшее решение, без каких-либо проверок JS, классов css и области просмотра: вы можете использовать функции взаимодействия с мультимедиа (уровень медиа-запросов 4)

Как это:

@media (hover) {
  // properties
  my:hover {
    color: red;
  }
}

iOS Safari поддерживает это

Подробнее о: https://www.jonathanfielding.com/an-introduction-to-interaction-media-features/

Question 8

В основном есть три сценария:

У пользователя есть только мышь / указатель, и он может активировать:hover
У пользователя только сенсорный экран, и он не может активировать :hoverэлементы
У пользователя есть как сенсорный экран, так и указатель.

Первоначально принят ответ отлично работает , если только первые два возможных сценария, когда пользователь имеет либо указатель или сенсорный экран. Это было обычным явлением, когда ОП задал вопрос 4 года назад. Несколько пользователей отметили, что устройства с Windows 8 и Surface делают третий сценарий более вероятным.

Решение iOS для проблемы невозможности зависания на устройствах с сенсорным экраном (как описано в @Zenexer) является умным, но может привести к неправильному поведению простого кода (как отмечено OP). Отключение наведения только для устройств с сенсорным экраном означает, что вам все равно нужно будет написать альтернативу для сенсорного экрана. Обнаружение того, что у пользователя есть и указатель, и сенсорный экран, еще больше запутывает воду (как объяснил @Simon_Weaver).

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

Переосмысление функциональности «наведения» с учетом сенсорных экранов дает хорошее обсуждение альтернативных подходов к UX. Решения, представленные в ответе, включают:

Замена всплывающих меню прямыми действиями (всегда видимые ссылки)
Замена меню при наведении на контекстное меню
Перемещение большого количества контента при наведении на отдельную страницу

В дальнейшем это, вероятно, будет лучшим решением для всех новых проектов. Принятый ответ, вероятно, является вторым лучшим решением, но обязательно учтите устройства, которые также имеют указательные устройства. Будьте осторожны, чтобы не исключить функциональность, когда на устройстве есть сенсорный экран, чтобы обойти :hoverвзлом iOS .

Question 9

Версия JQuery в вашем .css использует .no-touch .my-element: hover для всех ваших правил наведения, включая JQuery и следующий скрипт

function removeHoverState(){
    $("body").removeClass("no-touch");
}

Затем в теге body добавьте class = "no-touch" ontouchstart = "removeHoverState ()"

как только ontouchstart запускает класс для всех состояний наведения, удаляется

Question 10

Вместо того, чтобы иметь только эффекты наведения, когда касание недоступно, я создал систему для обработки сенсорных событий, и это решило для меня проблему. Сначала я определил объект для тестирования событий «касания» (эквивалент «щелчка»).

touchTester = 
{
    touchStarted: false
   ,moveLimit:    5
   ,moveCount:    null
   ,isSupported:  'ontouchend' in document

   ,isTap: function(event)
   {
      if (!this.isSupported) {
         return true;
      }

      switch (event.originalEvent.type) {
         case 'touchstart':
            this.touchStarted = true;
            this.moveCount    = 0;
            return false;
         case 'touchmove':
            this.moveCount++;
            this.touchStarted = (this.moveCount <= this.moveLimit);
            return false;
         case 'touchend':
            var isTap         = this.touchStarted;
            this.touchStarted = false;
            return isTap;
         default:
            return true;
      }
   }
};

Затем в моем обработчике событий я делаю что-то вроде следующего:

$('#nav').on('click touchstart touchmove touchend', 'ul > li > a'
            ,function handleClick(event) {
               if (!touchTester.isTap(event)) {
                  return true;
               }

               // touch was click or touch equivalent
               // nromal handling goes here.
            });

Question 11

Спасибо @Morgan Cheng за ответ, однако я немного изменил функцию JS для получения " touchstart " (код взят из ответа @Timothy Perez ), однако для этого вам понадобится jQuery 1.7+

  $(document).on({ 'touchstart' : function(){
      //do whatever you want here
    } });

Question 12

Учитывая ответ, предоставленный Zenexer, шаблон, не требующий дополнительных тегов HTML, выглядит следующим образом:

jQuery('a').on('mouseover', function(event) {
    event.preventDefault();
    // Show and hide your drop down nav or other elem
});
jQuery('a').on('click', function(event) {
    if (jQuery(event.target).children('.dropdown').is(':visible') {
        // Hide your dropdown nav here to unstick
    }
});

Этот метод сначала запускает наведение указателя мыши, а затем щелчок.

Question 13

Я согласен, что отключение наведения для касания - лучший вариант.

Однако, чтобы избавить себя от необходимости переписывать CSS, просто оберните любые :hoverэлементы в @supports not (-webkit-overflow-scrolling: touch) {}

.hover, .hover-iOS {
  display:inline-block;
  font-family:arial;
  background:red;
  color:white;
  padding:5px;
}
.hover:hover {
  cursor:pointer;
  background:green;
}

.hover-iOS {
  background:grey;
}

@supports not (-webkit-overflow-scrolling: touch) {
  .hover-iOS:hover {
    cursor:pointer;
    background:blue;
  }

}

<input type="text" class="hover" placeholder="Hover over me" />

<input type="text" class="hover-iOS" placeholder="Hover over me (iOS)" />

Развернуть фрагмент

Question 14

Для тех, кто часто использует отключение :hoverсобытий в iOS Safari, самый простой способ - использовать медиа-запрос минимальной ширины для ваших :hoverсобытий, который остается выше ширины экрана устройств, которых вы избегаете. Пример:

@media only screen and (min-width: 1024px) {
  .my-div:hover { // will only work on devices larger than iOS touch-enabled devices. Will still work on touch-enabled PCs etc.
    background-color: red;
  }
}

Question 15

Вы только посмотрите на размер экрана ....

@media (min-width: 550px) {
    .menu ul li:hover > ul {
    display: block;
}
}

Question 16

вот код, в который вы хотите его поместить

// a function to parse the user agent string; useful for 
// detecting lots of browsers, not just the iPad.
function checkUserAgent(vs) {
    var pattern = new RegExp(vs, 'i');
    return !!pattern.test(navigator.userAgent);
}
if ( checkUserAgent('iPad') ) {
    // iPad specific stuff here
}