iOS игнорирует тег <a>и уважает: hover

Question

У меня есть элемент списка с содержимым div внутри и тегом, обертывающим содержимое div. Пример кода:

<li>
  <a href="http://google.com/">
    <div id="tease-info">
      <div class="inset-img-border fade"></div>
      <img src="/img/img.jpg">
      <div id="arrow-right-small"></div>
      <h4 class="title">E-mail Marketing</h4>
      <p class="title">Messaging That Pays</p>
    </div>
  </a>
</li>

В моей таблице стилей у меня наведен указатель на «tease-info» для внутреннего содержимого. Вот так:

  #tease-info:hover h4{
    color: rgb(191,69,164);
  }

Проблема возникает только в IOS. На моем ipad, когда я касаюсь элемента li, я получаю серое наложение, родное для ios, давая вам знать, какой элемент вы выбрали. Я также получаю состояние наведения. Однако, когда я отпускаю, меня не переводят на href, и состояние наведения остается включенным.

Похоже, что состояние при наведении курсора управляет тегом? Что происходит?

Answer 1

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

.ugcpost:hover .meta {display:block;} 
.touch .ugcpost:hover .meta {display:none;}

, это решает проблему, просто убедитесь, что у вас есть событие touch в вашей конфигурации Modernizr.Еще одна более понятная опция, если вы используете JS для отображения и скрытия вашего наведения, это заставить страницу следовать за href одним щелчком мыши.Тем не менее, есть одна проблема, которую вы хотите отметить, чтобы вы могли отличить настоящий щелчок, а не экранную прокрутку.поэтому, пожалуйста, смотрите следующий JS, снова используя Modernizr, хотя вы просто проверяете код пользовательского агента клиента.

followPost : function(item) {
         $(item).on('touchend', function(e){
                location.href = $(item).attr('href');
                $(item).off('touchend');
             });
             $(item).on('touchmove', function(e){
                 $(item).off('touchend');
             });
     },
     initTouchEnhancements : function() {
        $('.collection a, .post a, .ugcpost a').live('touchstart', function() {
            var item = this
        followPost(item);   
        });
     }

ПРИМЕЧАНИЕ: это также зависит от использования функций включения и выключения в JQ 1.7,Спасибо за этот пост для определения этого. Остановить слишком быстрое выполнение сенсорного запуска при прокрутке