一、问题描述

笔者是在些一个登录界面时遇到这个问题的,需求是点击登录按钮出现登录悬浮框,初始化时登录悬浮框是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. linux 系统的ssh服务

    ssh服务由服务端软件Openssh和客户端(常见的有ssh,SecureCRT,putty,xshell)组成,ssh服务默认使用22端口提供服务,它有两个不兼容的ssh协议版本,分别是1.x和2. ...

  2. 学习React中遇到的问题

    1.执行eject后,再次启动项目报错 情景:使用create-react-app搭建了项目,启动没有问题,然后执行 $ yarn eject 暴露出webpack配置文件等,再次 $ yarn st ...

  3. 用css画的一个图形 空心正方形+四边四色

    div{ width: 100px; height: 100px; border: 100px solid black; border-left-color:darkcyan; border-righ ...

  4. Head First HTML与CSS、XHTML (中文版).(Elisabeth Freeman) PDF扫描版​

    面对那些晦涩的html书你不禁要问:“难道要成为专家之后才能读懂这些?”那么,你应该选择<head first html与css.xhtml(中文版)>真正来学习html.这本书对你来说, ...

  5. asp.net微信内置浏览器下Session失效

    问题记录:仅限安卓端微信内置浏览器,服务器集群设置了黏性Session,在Post请求时会强制走代理,导致出去的ip指向另一台服务器,黏性Session失效,用户状态无法保存. 目前想知道除了设置Se ...

  6. 《C#多线程编程实战》1.10 lock关键字

    lock关键字是锁定资源用的. 书上的代码解释很好. /// <summary> /// 抽象类 加减法 /// </summary> abstract class Count ...

  7. 修改Tomcat主目录

    在默认安装后,tomcat的主目录是webapps/root目录,如果我们想改变tomcat的主目录的话可以这样做: 1 %TOMCAT_HOME%/webapps/下直接创建,这种方法有一个缺点,就 ...

  8. PHP7 - MongoDB Driver 使用心得

    php7 只能使用Mongodb driver来驱动mongodb. 使用Mongodb Driver连接数据库 刚开始使用Mongodb Driver的时候我是拒绝的.查看官方文档只看到一排的类和不 ...

  9. struts2的主要工作流程

    struts2的框架结构图 struts2的主要工作流程: 1.客户端请求一个HttpServletRequest的请求,如在浏览器中输入http://localhost: 8080/bookcode ...

  10. Qt 学习之路 2(67):访问网络(3)

    Qt 学习之路 2(67):访问网络(3) 豆子 2013年11月5日 Qt 学习之路 2 16条评论 上一章我们了解了如何使用我们设计的NetWorker类实现我们所需要的网络操作.本章我们将继续完 ...