0

如何让 li:hover 在移动设备上正常工作？

在iphone上它甚至没有打开，在android上它在触摸后不会关闭：S

我想创建一个自定义下拉菜单，我需要 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>
4

2 回答 2

0

:hover 伪类需要一个指向（图形输入）设备，能够区分指向和选择/激活的动作。通常在带有触摸界面的移动设备上，您没有前者，只有后者。还有一些笔界面只允许激活，不能指点。

:hover 伪类在用户指定一个元素（使用一些指针设备）时应用，但不激活它。例如，当光标（鼠标指针）悬停在元素生成的框上时，可视用户代理可以应用此伪类。不支持交互式媒体的用户代理不必支持这个伪类。一些支持交互式媒体的符合标准的用户代理可能无法支持这个伪类（例如，笔设备）。

W3C：CSS 2.1：选择器、动态伪类

所以，回答你的问题：这取决于设备，但可能不是。不要依赖它。随着触摸屏设备的迅速普及，您将失去所有仅指点的事件。

于 2013-09-19T08:43:08.507 回答
0

如果您只是想在响应式设计或移动版本上获得多级菜单，请考虑：jQuery Responsive Menu Plugin它将列表菜单转换为选择。您可以指定要启动的视口，以及您想使用的菜单，甚至可以组合菜单。

于 2013-09-19T08:47:14.847 回答