例如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>

hover如何在移动浏览器上触发的更多相关文章

  1. yii2获取登录前的页面url地址--电脑和微信浏览器上的实现以及yii2相关源码的学习

    对于一个有登录限制(权限限制)的网站,用户输入身份验证信息以后,验证成功后跳转到登录前的页面是一项很人性化的功能.那么获取登录前的页面地址就很关键,今天在做一个yii2项目的登录调试时发现了一些很有意 ...

  2. swiper轮播在ie浏览器上遇到的显示问题探索

    前言: 最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换: 鼠标移开头像图片,图片变回原来的大小 注:下图是我根据上面需求已经实现的效果,所以截图方便说明 思考: ...

  3. 在FireFox浏览器上,用stopImmediatePropagation阻止冒泡鼠标滚动事件

    楔子 是不是在火狐用stopPropagation不太满意 很久没有笑过又不知为何 既然不快乐又不喜欢这里 不如一路向西用stopImmediatePropagation(其实我对浏览器的兼容性看不顺 ...

  4. 详解css3 pointer-events(阻止hover、active、onclick等触发事件来

    pointer-events 更像是JavaScript,它能够: 阻止用户的点击动作产生任何效果 阻止缺省鼠标指针的显示 阻止CSS里的 hover 和 active 状态的变化触发事件 阻止Jav ...

  5. trigger(type,[data]) 在每一个匹配的元素上触发某类事件。

    trigger(type,[data]) 概述 在每一个匹配的元素上触发某类事件.大理石平台价格表 这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个'submit', ...

  6. css3 pointer-events(阻止hover、active、onclick等触发事件)

    pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target. /* Keyword values */ pointer-events: ...

  7. h5页面在浏览器上好好的,到手机上熄火了又看不到报错信息怎么办?

    背景 最近小编接了一个新需求,用h5开发页面,通过webview嵌入原生APP中,自己在浏览器上开发爽歪歪,什么信息都能看到,可是一嵌入原生app中,瞬间就熄火了,啥也看不到了,不知道为什么,反正就是 ...

  8. 在web浏览器上显示室内温度(nodeJs+arduino+socket.io)

    上次的nodejs操作arduino入门篇中实现了如何连接arduino.这次我们来实现通过arduino测量室内温度并在浏览器上显示出来. [所需材料] 硬件:LM35温度传感器,arduino u ...

  9. 解决UC浏览器或微信浏览器上flex兼容问题

    在UC浏览器上使用display:flex;时会不起作用,要加上兼容性写法,如下 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ disp ...

随机推荐

  1. php-msf 源码解读【转】

    php-msf: https://github.com/pinguo/php-msf 百度脑图 - php-msf 源码解读: http://naotu.baidu.com/file/cc7b5a49 ...

  2. Java EE

  3. linux或Mac中./与/

      mac终端命令和linux中命令是一致的,在执行可执行xxx.sh文件时,需要进入xxx.sh文件所在的目录,然后输入./xxx.sh才可以执行成功 1.为什么需要添加./   因为linux/u ...

  4. python资料分享

    python入门资料分享:链接:https://pan.baidu.com/s/1aATizMh5e0ON6xfmtxXPzA  密码:m8bf 提高资料:链接:https://pan.baidu.c ...

  5. 一个js小游戏----总结

    花了大概一天左右的功夫实现了一个js小游戏的基本功能,类似于“雷电”那样的小游戏,实现了随即怪物发生器,碰撞检测,运动等等都实现了,下一个功能是子弹轨迹,还有其他一些扩展功能,没有用库,也没有用web ...

  6. scrapy分布式爬虫scrapy_redis一篇

    分布式爬虫原理 首先我们来看一下scrapy的单机架构:     可以看到,scrapy单机模式,通过一个scrapy引擎通过一个调度器,将Requests队列中的request请求发给下载器,进行页 ...

  7. acl.go

    package acl   import ( "github.com/armon/go-radix" )   var ( // allowAll is a singleton po ...

  8. 【转】一则使用WinDbg工具调试iis进程调查内存占用过高的案例

    最近遇到一个奇葩内存问题,跟了三四天,把Windbg玩熟了,所以打算分享下. 症状简介 我们团队的DEV开发环境只有一台4核16G的win2012r2.这台服务器上装了SqlServer.TFS(项目 ...

  9. Java并发编程(五)锁的使用(下)

    显式锁 上篇讲了使用synchronized关键字来定义锁,其实Java除了使用这个关键字外还可以使用Lock接口及其实现的子类来定义锁,ReentrantLock类是Lock接口的一个实现,Reen ...

  10. 【bzoj2331】[SCOI2011]地板

    题目链接: TP 题解: 分类讨论好烦啊! 0表示没有插头,1.2表示有插头,1表示接下来可以转弯,2表示接下来不能转弯,只能停在一个地方. 然后分类讨论: 插头状态 到达状态 0 0 2 2 | 1 ...