其实早知道这个属性,但是一直没有去研究过。今天正好在twitter看到这个词,就去研究了下,正好解决了目前遇到的一个小难题,所以分享下。嗯,其实这是个比较简单的CSS3属性。

在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样的话,这些浮在上面的div或者其它元素一般都会给个宽高,或者relative的元素可以不给宽高,这个时候,这些元素就会盖住下面的地图层,以至于地图层无法操作。。。

然后正好在Google map见到了类似的问题,拿来当例子来说:

Google map中左上角的操作区域占位是挺大的,如红色框区域,然后在这个区域是无法操作地图层的。那么我们就可以给这个div设置 pointer-events:none,然后你就会发现下面的地图就可以拖动和点击了。

但是悲剧的是,操作区域本身却无法操作了,直接被无视掉了。不过不用担心,我们可以给里面的元素重新设置为 pointer-events:auto,当然,只给需要操作的元素区域设置。

貌似有点儿纠结,不过这样可以保证地图本身的可操作区域最大化。

嗯,上面只是个简单的例子,来看下具体用法:

pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

pointer-events属性有很多值,但是对于浏览器来说,只有auto和non两个值可用,其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。

pointer-events属性值详解

  • auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。
  • none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。
  • 其它属性值为SVG专用,这里不再多介绍了。

浏览器兼容性

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性,IE6/7/8/9都不支持,Opera在SVG中支持该属性但是HTML中不支持。好吧,还是有点儿悲催~~

原文:http://www.poluoluo.com/jzxy/201109/142876.html

css忽略某一层的存在:pointer-events:none的更多相关文章

  1. 浏览器 Pointer Events

    前言 Pointer Events是一套触控输入处理规格,支持Pointer Events的浏览器包括了IE和Firefox,最近Chrome也宣布即将支持该处理规则. PointerEvent Po ...

  2. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  3. javascript code snippet -- Forwarding Mouse Events Through Layers

    Anyone who has worked with web apps has likely created a masking element at some point, and the grea ...

  4. css系列(6)css的运用(二)

        本节继续介绍css在html页面重的应用实例.     (1)div的border-style属性: none: 无样式 hidden: 除了同表格的边框发生冲突的时候,其它同none dot ...

  5. css盒模型与bfc与布局与垂直水平居中与css设计模式等

    一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...

  6. 使用css counter来美化代码片段的样式

    博客园默认的代码片段样式不太美观,特别是复制代码时会把前面的行号也复制下来,操作起来比较麻烦.最近看到一种使用CSS计数器来美化代码片段的方法,于是研究了一下计数器的使用,在此做个笔记. 这是官网的例 ...

  7. HTML、CSS常用技巧

    一.HTML 在介绍HTML之前,我们先看一下HTML的文档树结构,主要包括哪些: (一).头部标签 1,Doctype Doctype告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档 ...

  8. CSS选 择器 三种样式

    一.CSS三种样式 代码 宽度 高度 实线 颜色  A内联样式是优先级最高的方式 px必须写 A:内联式  弊端:代码多很乱 <body> <div class="divc ...

  9. ExtJS笔记 Using Events

    Using Events The Components and Classes of Ext JS fire a broad range of events at various points in ...

随机推荐

  1. 20145203盖泽双 《Java程序设计》第6周学习总结

    20145203盖泽双 <Java程序设计>第6周学习总结 教材学习内容总结 1.如果要将数据从来源中取出,可以使用输入串流,若将数据写入目地, 可以使用输出串流.在java中,输入串流代 ...

  2. CentOS部署Kubernetes1.13集群-1(使用kubeadm安装K8S)

    参考:https://www.kubernetes.org.cn/4956.html 1.准备 说明:准备工作需要在集群所有的主机上执行 1.1系统配置 在安装之前,需要先做如下准备.三台CentOS ...

  3. springmvc项目打war包部署到tomcat访问路径去掉项目名

    一般来说,部署到tomcat则是把war包丢到webapps目录下,启动Tomcat会自动解压,成一个war包名称的文件夹项目, 例如imgManager.war 访问的地址一般是localhost: ...

  4. c++——引用

    1 引用概念 a)         在C++中新增加了引用的概念 b)         引用可以看作一个已定义变量的别名 c)         引用的语法:Type& name = var; ...

  5. P1474 货币系统 Money Systems

    题目描述 母牛们不但创建了它们自己的政府而且选择了建立了自己的货币系统.由于它们特殊的思考方式,它们对货币的数值感到好奇. 传统地,一个货币系统是由1,5,10,20 或 25,50, 和 100的单 ...

  6. #leetcode刷题之路40-组合总和 II

    给定一个数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合.candidates 中的每个数字在每个组合中只能使用一次.说 ...

  7. 新装Linux无法访问域名

    昨天新安装Linux,发现ping百度ping不通: 经查询,得知是系统没有配置DNS域名服务器,百度搜索DNS域名服务器列表: 编辑 /etc/resolv.conf 文件,添加查询到的DNS服务器 ...

  8. 如何方便的结果ajax使用html5的新type类型

    今天需要做手机端的输入表单自动生成器,突然就想到了手机端对input的输入类型支持还不错,于是翻遍了资料,有了下面的使用方法,闲话少说,上正文: html5现在可以用的新input type类型一共有 ...

  9. CodeIgniter Doctrine2基本使用(二)(转)

    CodeIgniter Doctrine2基本使用(二) 继上次写的一篇文章<CodeIgniter Doctrine2基本使用(一)>写到操作实体的之通过Channel这个实体向数据库表 ...

  10. lua表类型

    Lua的表的定义: typedef struct Table { CommonHeader; lu_byte flags; lu_byte lsizenode; /* log2 of size of ...