css - iOS 忽略 标签并尊重 :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 并且悬停状态保持启用状态。

悬停状态似乎凌驾于 a 标签之上？发生了什么事？

Answer 1

好的，我现在有办法解决。从使用 Modernizr 开始，我阅读了一项建议使用 .touch 和 .no-touch 类来解决问题的技术。如果您的 :hover 事件用 CSS 表示，这很容易实现

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

这解决了问题，只需确保您的 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 中“开”和“关”功能的使用。感谢这篇文章识别这一点。 Stop the touchstart performing too quick when scrolling