css3属性pointer-events介绍
来源:互联网 发布:云办公软件 编辑:程序博客网 时间:2024/05/29 09:42
在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样的话,这些浮在上面的div或者其它元素一般都会给个宽高,或者relative的元素可以不给宽高,这个时候,这些元素就会盖住下面的地图层,以至于地图层无法操作。。。
那么我们就可以给这些元素设置 pointer-events:none,然后你就会发现下面的地图就可以拖动和点击了。
但是悲剧的是,操作区域本身却无法操作了,直接被无视掉了。不过不用担心,我们可以给里面的元素重新设置为 pointer-events:auto,当然,只给需要操作的元素区域设置。
貌似有点儿纠结,不过这样可以保证地图本身的可操作区域最大化。
嗯,上面只是个简单的例子,来看下具体用法:
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.qianduan.net/css3-pointer-event-description.html- css3属性pointer-events介绍
- CSS3 pointer-events介绍
- css3的pointer-events属性
- CSS3教程:pointer-events属性值详解
- CSS3教程:pointer-events属性值详解
- CSS 特殊属性介绍之 pointer-events
- 神奇的css属性css3 属性pointer-events
- CSS3 pointer-events:none
- css3 pointer-events: none;
- css3之pointer-events
- CSS3教程:pointer-events属性值详解(转)
- css3 可穿透的盒子标签属性 pointer-events
- CSS pointer-events属性
- SVG pointer-events属性
- css pointer-events属性
- css pointer-events属性
- CSS3 pointer-events的应用
- CSS3——pointer-events
- 学习GDB
- [android JB audioflinger] SyncEvent
- CompatibleOne FAQ
- VC的初步认识
- 强势品牌战略规划五步骤
- css3属性pointer-events介绍
- 在App Store里混,如何写好关键词?
- msxml3.dll 错误 '80072efd' A connection with the server could not be established
- linux2.6 input subsystem中部分相关结构体的分析
- 开放闭合原则--Open-Closed Principle
- 董事长给大学生的18条忠告
- myeclipse的启动配置文件myeclipse.ini的认识
- simula
- 路由器设置多WAN口要点技巧