CSS 下拉菜单在 iOS 设备上无法正常工作

Question

CSS 下拉菜单在 iOS 设备上无法正常工作

5

为什么我的CSS下拉菜单在Android和所有PC浏览器上都能正常工作，但在iOS设备上不能正常工作？

.mainHeaderBtns ul li:hover > ul {
    display:block;
}

- Boodog

你如何在移动设备上实现悬停效果？ - epascarello

悬停在Android上可以正常工作。 - Boodog

这个回答解决了你的问题吗？iPad上典型的CSS菜单下拉悬停问题 - Simon East

@SimonEast 这个问题已经快6年了，而且已经有一个被接受的答案了，哈哈。 - Boodog

是的，抱歉。当我将线程标记为重复时，StackExchange会自动插入您在我的评论中看到的文本。我可能应该编辑它，但现在已经太晚了。 - Simon East

2个回答

-1

我能够使用符合标准的代码很好地完成这项工作，无需使用Javascript的hack。

CSS的关键部分：

/* hide submenu by default */
.nav .submenu {
  display: none; 
}
/* show submenu on :hover and :focus-within */
.nav li:hover .submenu, .nav li:focus-within .submenu {
  display: block; 
}

为了让 iPad 上的 :hover 正常工作，您需要在顶级菜单项中添加一个 tabindex。

<ul class="nav">
  <li tabindex="0">
    Menu Item
    <ul class="submenu">
      <li>...</li>
    </ul>
  </li>
</ul>

然后为了能够“关闭”菜单，你还需要给标签添加一个tabindex属性：

<body tabindex="0">

这种方法的好处是它还允许键盘导航，这对于可访问性非常有好处。

- Simon East

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stickers · Accepted Answer

根据我的测试，对于下拉菜单，请确保页面上的<a href="#">元素可见并可点击。我制作了一个简单的演示，并且它可以正常工作。

.nav > li > ul {
  display: none;
}
.nav > li:hover > ul {
  display: block;
}

<ul class="nav">
  <li>
    <a href="#">Menu item</a>
    <ul>
      <li>Sub item</li>
    </ul>
  </li>
</ul>

对于任何元素，苹果¹建议添加 onclick = "void(0)"。我也发现 onclick="return false;" 或者 onclick="" 都可以。

div span {
  display: none;
}
div:hover span {
  display: inline;
}

<div onclick="void(0)">Howdy <span>mates!</span></div>

¹_{https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html}