一、问题描述

笔者是在些一个登录界面时遇到这个问题的,需求是点击登录按钮出现登录悬浮框,初始化时登录悬浮框是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. 引用母版页的内容页添加CSS文件

    在内容页当中定义一个类然后调用内中的方法即可 public static class addstyle{  //可以不用实例化 public static void addstylesheet(Pag ...

  2. npm更换为镜像

    背景:npm在安装的过程中需用从国外的网站获取代码,速度非常慢,因此更换为淘宝镜像,提升速度. 1.永久起作用: npm config set registry https://registry.ta ...

  3. MD5和SHA-1

    MD5和SHA-1都是我们耳熟能详的术语了,很多人可能知道他们跟加密有关系,但是他们是怎么做到加密的,他们各自的特点又是什么.我来简单的讲一讲. MD5和SHA-1都被称作哈希(Hash)函数,用过J ...

  4. 【AT2434】JOI 公園 (JOI Park) 最短路+贪心

    题解 我的歪解 我首先想的是分治,我想二分肯定不行,因为它是没有单调性的. 我想了一下感觉它的大部分数据应该是有凸性的(例如\(y=x^2\)的函数图像),所以可以三分. 下面是我的三分代码(骗了不少 ...

  5. eclipse中查看java源码时,出现source not found问题

  6. ionic4 添加自定义字体图标

    在angular.json中的style中引入css文件: 然后在variables.scss中添加内容:

  7. word的样式设置

    一般自己写文档就用typora了,便捷美观,但是在工作上又不得不用word写文档,我对审美.格式比较有强迫症,有的小公司没有形成自己的文档规范,或者所谓的规范也只是写好了格式的文档,你往里面填内容就可 ...

  8. CentOS 6.* 安装node

    CentOS6 安装node 使用node -v 是报错 ./node: error while loading shared libraries: libstdc++.so.6: cannot op ...

  9. urlencode编码问题(以及urlparse) 转

    网址链接中的中文编码 中文的gbk(GB2312)编码: 一个汉字对应两组%xx,即%xx%xx 中文的UTF-8编码: 一个汉字对应三组%xx,即%xx%xx%xx 可以利用百度进行URL编码解码 ...

  10. MySql数据库数据类型及约束介绍

    1,MySql中数据类型介绍 整型及浮点型 数据类型 存储范围 字节 TINYINT 有符号值:-2^到2^7-1 无符号值:0到2^8-1 2 SMALLINT 有符号值:-2^15到2^15-1 ...