Question

如果没有:hover元素，如何在iPhone上修复<a>？

我正在使用<li>元素，当我选中它时iPhone不会打开我的子菜单。

示例html：

<ul>
  <li>Menu item (no <a> element)
    <ul>
      <li><a href="#">Menu item</a><li>
    </ul>
  <li>
</ul>

我用JavaScript方式解决了这个问题，但我想知道是否有不同的方法可以解决这个问题（可能是更好的方法）

Answer 1

您可以使用JavaScript解决此问题。以下脚本将hover作为类添加到<li>元素：

<script type="text/javascript">
$("li").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);  
</script>

只需在CSS中添加li.hover li:hover，就像这样：

此：

ul li:hover ul{
    display:block;
}

将是：

ul li:hover ul,
ul li.hover ul,{
    display:block;
}

jQuery文档：
http://api.jquery.com/hover/
http://api.jquery.com/addClass/

Answer 2

导致iPhone尊重悬停状态。

<ul>
  <li onclick="//">test</li>
  <li onclick="//">test</li>
  <li onclick="//">test</li>
</ul>

Answer 3

我找到了处理div的最佳方法：将鼠标悬停在iphone上工作。不使用javascript

使用cursor: pointer使您的元素充当锚标记

CSS

ul li {cursor：pointer}

您还会注意到，当您在下拉菜单外单击时，除非您单击真实链接，否则它不会在iphone上关闭。由于我们无法在手机上看到光标，这就是我所做的解决方案。

CSS

body {cursor：pointer}

Answer 4

虽然iPhone / etc没有特别具有悬停状态，但是当用户点击它们时会触发链接的悬停状态。通常双击实际上会跟随链接。

也许重构HTML，以便您拥有悬停状态的锚点，而不仅仅是列表项目。不需要JS。

Answer 5

添加：焦点和：对您的样式有效：

ul li ul {display：none} ul li：focus ul，ul li：active ul {display：block}

Answer 6

http://blog.0100.tv/2010/05/fixing-the-hover-event-on-the-ipadiphoneipod/

//ipad and iphone fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
    $(".menu li a").click(function(){
        //we just need to attach a click event listener to provoke iPhone/iPod/iPad's hover event
        //strange
    });
}

我该如何修复：如果没有<a> element?</a>则将鼠标悬停在iPhone上

6 个答案: