hover如何在移动浏览器上触发

例如HTML结构如下

<div>menu
<ul>
    <li>item1</li>
    <li>item2</li>
</ul>
</div>

CSS

div:hover ul {
    display:block;
}

 

如上代码，当鼠标悬浮到menu上时，显示ul，但是由于移动浏览器没有鼠标，因此无法触发css中的hover. 

解决办法：可以用点击来触发hover

<div onclick="javascript:void(0)">menu
<ul>
    <li>item1</li>
    <li>item2</li>
</ul>
</div>

 

给div加上onclick事件，点击menu的时候，便会触发hover，显示ul. 但是这样又会导致menu一直是hover状态，那么该怎么离开hover状态呢？

其实也很简单，在menu之外的地方也添加一个onclick事件，当点击menu之外的地方时，menu就离开了hover状态。

<div onclick="javascript:void(0)">
 ...
 <div ....>menu
 ...
</div>