例如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. SSM-MyBatis-17:Mybatis中一级缓存(主要是一级缓存存在性的证明,增删改对一级缓存会造成什么影响)

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 缓存------------------------------------------> 很熟悉的一个 ...

  2. 推荐一个比crontab更好用的东西:crongo

    This is a crontab service that supports hot plug and high performance. In addition, it supports seco ...

  3. Kali Linux中下载工具Axel的安装和使用

    前言: Axel是一个多线程的HTTP/FTP下载工具,支持断点续传. Axel的安装 apt-get install axel Axel的卸载 apt remove axel 安装完成之后输入 ax ...

  4. Java基础小知识1——分别使用字节流和字符流复制文件

    在日常使用计算机过程中经常会涉及文件的复制,今天我们就从Java代码的角度,看看在Java程序中文件复制的过程是如何实现的. 1.使用字节流缓冲区复制文件 示例代码如下: import java.io ...

  5. (三)Maven使用入门之Hello World

    主要内容 编写POM 编写主代码 编写测试代码 打包和运行 到目前为止,已经大概了解并安装好了Maven,现在开始创建一个最简单的HelloWorld项目. 编写POM 就像Make的Makefile ...

  6. 如何把word中的图片怎么导出来呢?

    在办公使用word的过程中你可能经常会遇到这个问题:插入到word中的图片找不到导出来的方法,是不是很郁闷呢,别急,今天咱们研究一下把word中的图片导出来的方法(把"我的"变成你 ...

  7. stop_token.go

    package engine import (     "bufio"     "log"     "os" ) type StopToke ...

  8. I/O------字节输出流

    package io.day03; import java.io.FileOutputStream; import java.io.OutputStream; public class day03ou ...

  9. key.go

    package].Key)         if err = waitDelete(ctx, client, lastKey, resp.Header.Revision); err != nil { ...

  10. UOJ182 a^-1 + b problem 解题报告

    题目描述 有一个长度为\(n(n\le 10^5)\)的数列,在模\(M\)意义下进行\(m(m \le50000)\)次操作,每次操作形如以下两种形式: 1 \(x\) 表示每个数加\(x(0 \l ...