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

时间：2018-01-27 11:38:44 阅读：222 评论：0 收藏：0 [点我收藏+]

例如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状态。

<doby onclick="javascript:void(0)">
 ...
</body>

原文地址：https://www.cnblogs.com/kexxxfeng/p/8364925.html

踩

(0)

评论一句话评论（0）