一、问题描述

笔者是在些一个登录界面时遇到这个问题的,需求是点击登录按钮出现登录悬浮框,初始化时登录悬浮框是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. 【2008nmj】Logistic回归二元分类感知器算法.docx

    给你一堆样本数据(xi,yi),并标上标签[0,1],让你建立模型(分类感知器二元),对于新给的测试数据进行分类. 要将两种数据分开,这是一个分类问题,建立数学模型,(x,y,z),z指示[0,1], ...

  2. 关于spring”通配符的匹配很全面, 但无法找到元素 'context:component-scan' 的声明“的错误

    关于spring配置的问题 近日学习spring时遇到了这个问题: org.springframework.beans.factory.xml.XmlBeanDefinitionStoreExcept ...

  3. Fragment生命周期及在viewpager中的生命周期

    简介 本篇博客主要从一下三个方面介绍fragement的生命周期 1.fragment的生命周期及与Activity的生命周期的比较 2.FrameLayou布局添加.替换Fragment时fragm ...

  4. orcl 对table的一些操作

    删除 table:drop table 表名: 恢复删除 : flashback table 表名 to before drop: 清空table : truncate table 表名; 恢复清空: ...

  5. Invoke()的使用

    (最近在看协程) Invoke()方法是一种委托机制 Invoke ( "SendMsg", 3 ), 意思是3秒之后调用 SendMsg() 方法 使用时应该注意以下几点: 1. ...

  6. 一、认识Node.js

    1.什么是Note.js? 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个 Javascript 运行环境(runtime).它让 JavaScript 可 ...

  7. 查看进程的pid和ppid

    用个栗子来说明吧from multiprocessing import Processimport time,os def task(): print('%s is running ,parents ...

  8. jmeter在linux上运行

    若需在linux操作系统上运行jmeter,则需要以命令行的形式运行. 前提条件:linux环境下配置好jdk.jmeter的环境变量等. 1.首先在Windows的图形化界面做好脚本,设置好并发用户 ...

  9. loj #2013. 「SCOI2016」幸运数字

    #2013. 「SCOI2016」幸运数字 题目描述 A 国共有 n nn 座城市,这些城市由 n−1 n - 1n−1 条道路相连,使得任意两座城市可以互达,且路径唯一.每座城市都有一个幸运数字,以 ...

  10. [AHOI2009]中国象棋 BZOJ1801 dp

    题目描述 这次小可可想解决的难题和中国象棋有关,在一个N行M列的棋盘上,让你放若干个炮(可以是0个),使得没有一个炮可以攻击到另一个炮,请问有多少种放置方法.大家肯定很清楚,在中国象棋中炮的行走方式是 ...