iOS忽略<a>标记和尊重：悬停

我有一个列表元素与div内容里面和一个标签包装div的内容。示例代码：iOS忽略<a>标记和尊重：悬停

<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并且悬停状态保持启用状态。

看起来悬停状态超过了标签？发生什么事？

来源

2012-03-15 Ryan Dunlap

iOS不支持'：hover'伪类，因为它没有悬停的概念。一般来说，它会试图把它当作一个粘性的'：active'来处理，但是更多的只是因为它并不真正知道如何处理它。如果您尝试将悬停样式应用于'a'而不是'div'（您可能需要修改HTML以达到此目的）？ – BoltClock 2012-03-15 16:24:57

我有一个元素'

'绝对定位在div和悬停应用到它。当我删除这个元素时，一切都很好，而且href不再被忽略。奇怪的是，我有其他绝对定位的元素在同一个div中。不确定究竟是什么原因。 – 2012-03-15 16:50:32

我也有这个问题......它似乎忽略了悬停效果，忘记了原始的abchor点击效果。我可能会尝试禁用iOS的悬停效果。会让你知道我是否找到了解决办法 – nickmorss 2012-04-10 15:22:45

好的我现在有一个修复程序。从使用Modernizr开始，我读了一种技巧，建议使用.touch和.no-touch类来解决问题。这个工程很容易地如果您：悬停事件在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中使用'on'和'off'函数。感谢这篇文章的确认。 Stop the touchstart performing too quick when scrolling

来源

2012-04-11 14:00:27 nickmorss

iOS忽略<a>标记和尊重：悬停

回答

相关问题