一、问题描述

笔者是在些一个登录界面时遇到这个问题的,需求是点击登录按钮出现登录悬浮框,初始化时登录悬浮框是display:none的,但笔者发现登录框那一块区域的input框无法响应点击时间,也无法获得焦点。

一般鼠标放在input框上是会变成编辑的横杠,input框也会获得焦点。

二、解决方案

对上层元素使用:

pointer-events: none;

这样点击事件就能穿透上层元素,

但若是你想让上层元素也能得到点击事件,又该怎么办呢?

只需要在你需要获得点击的上层元素子元素中加入:

pointer-events: auto;

即可!

如何透过上层div点击下层的元素解决方法的更多相关文章

  1. 使用PullToRefreshListView时遇到Item点击事件失效问题 解决方法

    最近在自己的项目中使用到了以下开源项目: https://github.com/nanchen2251/pullToRefreshDemo 相关介绍博客如下: http://www.cnblogs.c ...

  2. JavaSwing输入对话框,点击取消抛出异常的解决方法

    在做产品管理系统的时候,遇到一个问题: 在得到一个输入框对话框的时候 String textPrice = JOptionPane.showInputDialog("请输入要调整的价格增(减 ...

  3. ASP.NET Menu控件点击区域太小解决方法

    ASP.NET自带的Menu控件点击区域比较小,基本就是文本范围和图片范围,在区域外虽然选择的项有颜色变化,但是这个时候点击是没有用的,体验不是很好 检查前台生成的HTML,是用td嵌套a标签,a标签 ...

  4. jquery.uploadify上传图片,点击保存按钮无法使用解决方法

    用Chrome浏览器上传商品图片时,保存按钮无法点击,如下图 原因:Flash插件状态为禁止 或 询问(默认) 解决方法:将Flash插件状态改为允许,如下图

  5. ios 透过上层视图点击相应下方视图的点击事件

    - (UIView*)hitTest:(CGPoint)point withEvent:(UIEvent *)event{ UIView *hitView = [super hitTest:point ...

  6. div+css的兼容性问题和解决方法

    1. 默认的内外边距不同 问题: 各个浏览器默认的内外边距不同 解决: *{margin:0;padding:0;}   2. 水平居中的问题 问题: 设置 text-align: center    ...

  7. Win7下IE11点击无反应的解决方法

    平台:win7 sp1 32bit 问题:点击Internet Explorer在开始菜单.快捷栏的图标和安装目录下的程序均没有反应,鼠标在变成漏斗后恢复原状再无反应.但搜狗浏览器和360浏览器下使用 ...

  8. IE8下使用webuploader点击无反应的解决方法。

    在IE8开头添加如下代码. <meta http-equiv="X-UA-Compatible" content="IE=edge"> 即可解决,亲 ...

  9. Android ListView的item点击无响应的解决方法

    假设listitem里面包含button或者checkbox等控件,默认情况下listitem会失去焦点,导致无法响应item的事件,最经常使用的解决的方法 是在listitem的布局文件里设置des ...

随机推荐

  1. Java 可变字符串StringBuilder/StringBuffer的区别

    public class StringBuilder_and_StringBuffer { private static long SystemTime(){ return System.curren ...

  2. JavaEE互联网轻量级框架整合开发(书籍)阅读笔记(2):SSM+Redis概念理解

    一.SSM+Redis的结构图 在Java互联网中,以Spring+SpringMVC+MyBatis(SSM)作为主流框架,SSM+Redis的结构图如下: 二.下面介绍它们各自承担的功能: 1.S ...

  3. 【Head First Java 读书笔记】(一)基本概念

    Java的工作方式 你要做的事情就是会编写源代码 Java的程序结构 类存于源文件里面 方法存在类中 语句存于方法中 剖析类 当Java虚拟机启动执行时,它会寻找你在命令列中所指定的类,然后它会锁定像 ...

  4. FreeMarker的实例通俗理解

    1.把包lib/freemarker.jar拷贝到项目中 2.  在WEB-INF下新建文件夹templates  在templates下新建test.ftl文件 内容为: <html> ...

  5. HTML5和CSS3实例教程 中文版 高清PDF扫描版

    HTML5和CSS3实例教程共分3部分,集中讨论了HTML5和CSS3规范及其技术的使用方法.首先是规范概述,介绍了新的结构化标签.表单域及其功能(包括自动聚焦功能和占位文本)和CSS3的新选择器.接 ...

  6. .Net Core 项目引用本地类库方式(一)

    最近了解到.NET Core 项目,引用本地类库DLL的方式有三种 1.非同解决方案下的引用,直接引用,浏览,找到对应的DLL,然后确定引用. 这种方式有个不好的地方就是,如果引用的DLL文件里面,也 ...

  7. WebService 天气预报webservice接口

    WebService  天气预报webservice接口 地址:http://www.webxml.com.cn/WebServices/WeatherWebService.asmx 常用接口: 1. ...

  8. ios app提交之前需要哪几个证书

    1.遇到的问题 一款App在别人的机器上开发和发布,现在迭代更新和开发需要在一台新mac机上开发和发布. (使用同一个开发者账号)问题: 1.在新mac机器上开发并导入真机测试,是不是需要从别人的机器 ...

  9. Mybatis中的连接池

    Mybatis中DataSource的存取 MyBatis是通过工厂模式来创建数据源DataSource对象的,MyBatis定义了抽象的工厂接口:org.apache.ibatis.datasour ...

  10. CPU 的工作原理

    内部架构 CPU 的根本任务就是执行指令,对计算机来说最终都是一串由 0 和 1 组成的序列.CPU 从逻辑上可以划分成 3 个模块,分别是控制单元.运算单元和存储单元 .其内部架构如下: [1]控制 ...