悬停触控设备答案

【问题标题】：Hover for Touch Devices悬停触控设备
【发布时间】：2011-08-10 01:18:04
【问题描述】：

我正在使用以下众所周知的 CSS 代码来获取网页上的下拉菜单。

div#menu ul ul {
    display: none;
}
div#menu ul li:hover ul {
    display: block;
}

菜单是一个包含另一个 u-list 的 u-list。当鼠标悬停在此菜单中的列表项上时，第二个 u-list 变为可见。列表项没有链接，只有文本。

这适用于现代浏览器。我有一个适用于 IE6 的 javascript forge。

但是，它不适用于触控设备。

在 iPad 上什么也没有发生，即使我按下列表项。这可能是因为列表项不是锚。或者，我需要一个点击事件来解决这个问题。

在 Android 浏览器上，长按列表项会打开子菜单。但是，子菜单中没有链接可以选择。

谁能帮帮我？

如果您需要详细信息（并且有时间），请查看

http://www.rene-grothmann.de/musica-aliter-test/

谢谢。

【问题讨论】：

我建议考虑使用一些 Javascript 并在触摸时显示菜单。悬停菜单在触摸设备上使用起来非常困难。

标签： html css hover

【解决方案1】：

div#menu ul li:hover ul 需要变为 div#menu ul li:active ul 才能在触摸设备上做出响应，因为它们不支持悬停状态。

【讨论】：

这不起作用。在桌面上，菜单不能再用了，而在安卓上，active状态下会做奇怪的事情，但是没有打开菜单。
它不能在桌面上运行，我相信你需要添加一个媒体查询然后定位到触摸设备。它不会打开菜单，因为:active 仅在人的手指在ul 上按下时才有效。我认为您最好的选择是使用 JavaScript 将 display 更改为 display:block;。

【解决方案2】：

尝试像这样嵌套列表元素：

<ul>
    <li><a href="#">LINK</a>
        <ul>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
        </ul>
    </li>
    <li>
    more links here, if you wish.
    </li>
</ul>

悬停状态应该没有问题。应该可以在任何设备上正常工作。至少这对我来说是这样的。

【讨论】：

是的，没关系。但是，我想知道一个更标准的方法。必须使列表项成为链接，只是为了获得正确的行为，这听起来很奇怪。如果我发现了，我把它贴在这里。谢谢。

【解决方案3】：

我认为您的列表项应该是链接。你至少应该尝试一下，看看它是否有效。

【讨论】：

是的，我试过了。它适用于安卓系统。我无法在 iPad 上进行测试，因为我现在没有 :-( 但是在 Android 上，我不喜欢那个解决方案，因为它会重新加载整个页面（菜单打开）并将其放回左上角。菜单确实保持打开状态，可供点击。