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类来修复问题的技术。如果你的：悬停事件用CSS表示

，这很容易

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

这解决了问题，只需确保您的Modernizr配置中有触摸事件。如果你使用JS显示和隐藏你的悬停，另一个更加充实的选项是强制页面跟随href只需单击一下。有一个问题需要注意，但您要确保区分真正的点击而不是屏幕滚动。所以请再次使用Modernizr查看以下JS，相当于您只需检查客户端的用户代理。

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中使用'on'和'off'功能。感谢这篇文章来识别这一点。 Stop the touchstart performing too quick when scrolling

iOS忽略<a> tag and respecting :hover</a>

1 个答案: