li：在移动设备上悬停下拉菜单

Question

How do I get li:hover to work correctly on mobile devices? 如何让li：hover在移动设备上正常工作？

On iphone it doesn't even open, on android it doesn't close after touch :S 在iphone上甚至无法打开，在android上，触摸后它不会关闭：S

I want to create a custom dropdown menu and I need the javascript to get information from the li that is clicked. 我想创建一个自定义下拉菜单，我需要JavaScript才能从单击的li中获取信息。

<!DOCTYPE html>
<title>li:hover dropdown menu on mobile devices</title>

<style>
li ul{display:none}
li:hover ul{display:block}
</style>

<ul>
<li><div id=div>chose</div>
<ul>
<li id=li data-info="som data">level 2
</ul>
</ul>

<script>
window.onload = function(){
document.getElementById('li').onclick = function(){
document.getElementById('div').innerHTML = document.getElementById('li').getAttribute('data-info');
}
}
</script>

Answer 1

The :hover pseudo-class needs a pointing (graphical input) device, capable of distinguishing the actions pointing and selecting/activating. ：hover伪类需要一个指向（图形输入）设备，该设备能够区分指向和选择/激活的动作。 Usually on mobile devices with a touch interface you don't have the former, only the latter. 通常在带有触摸界面的移动设备上，您没有前者，只有后者。 Also some pen interfaces only allow activating, not pointing. 另外，某些笔界面仅允许激活，而不能指向。

The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. ：hover伪类在用户指定元素（使用某些定点设备）时适用，但不激活它。 For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. 例如，当光标（鼠标指针）悬停在由元素生成的框上时，可视用户代理可以应用此伪类。 User agents not supporting interactive media do not have to support this pseudo-class. 不支持交互式媒体的用户代理不必支持此伪类。 Some conforming user agents supporting interactive media may not be able to support this pseudo-class (eg, a pen device). 一些支持交互式媒体的合格用户代理可能无法支持此伪类（例如，笔设备）。

W3C: CSS 2.1: Selectors, dynamic pseudo-classes W3C：CSS 2.1：选择器，动态伪类

So, to answer your question: It depends on the device but likely no. 因此，回答您的问题：这取决于设备，但可能不取决于设备。 And don't rely on it. 而且不要依赖它。 With touch-screen devices quickly gaining in popularity you'll lose the entirety of pointing-only events. 随着触摸屏设备的迅速流行，您将失去所有仅指向事件。

Answer 2

If you're just looking to get a multi-level menu working on a responsive design, or mobile version, consider this: jQuery Responsive Menu Plugin it turns a list menu into a select. 如果您只是想在响应式设计或移动版本上使用多级菜单，请考虑以下事项： jQuery响应式菜单插件可将列表菜单变为选择菜单。 You can specify the viewport for it to kick in, and the menu you'd like to use, or even combine menus. 您可以指定要启动的视口，以及要使用的菜单，甚至可以合并菜单。

li：在移动设备上悬停下拉菜单

问题描述

2 个解决方案

解决方案1
0 已采纳 2013-09-19 08:43:08

解决方案2
0 2013-09-19 08:47:14

li：在移动设备上悬停下拉菜单

问题描述

2 个解决方案

解决方案1 0 已采纳 2013-09-19 08:43:08

解决方案2 0 2013-09-19 08:47:14

解决方案1
0 已采纳 2013-09-19 08:43:08

解决方案2
0 2013-09-19 08:47:14