如何让 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>
最佳答案
:hover 伪类需要一个指向(图形输入)设备，能够区分指向和选择/激活的 Action 。通常在带有触摸界面的移动设备上你没有前者，只有后者。还有一些笔接口(interface)只允许激活，不能指向。
:hover 伪类在用户指定一个元素(使用一些指针设备)但不激活它时应用。例如，当光标(鼠标指针)悬停在元素生成的框上时，可视化用户代理可以应用此伪类。不支持交互式媒体的用户代理不必支持这个伪类。一些支持交互式媒体的合格用户代理可能无法支持此伪类(例如，笔设备)。
W3C: CSS 2.1: Selectors, dynamic pseudo-classes
因此，回答您的问题:这取决于设备，但可能不是。不要依赖它。随着触摸屏设备的迅速流行，您将失去所有仅指向事件。
关于javascript - 李 :hover dropdown menu on mobile devices，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18889939/