《
CSS3教程 pointer-events属性值详解》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302332392013.htm
实在早晓得这个属性,CSS3教程 overflow属性超过一行显示省略号，但是始终没有去研讨过。今天正好在twitter看到这个词，就去研究了下，正好解决了目前碰到的一个小困难，所以分享下。嗯，其实这是个比拟简单的CSS3属性。
Firefox 3.6+和chrome 2.0+ 以及safari 4,CSS3教程 box-sizing属性.0+都支持这个CSS3属性，IE6/7/8/9都不支撑，Opera在SVG中支持该属性但是HTML中不支持。好吧，还是有点儿悲催～～
貌似有点儿纠结，不外这样能够保障舆图自身的可操作区域最大化。
--> [
网站建设之]CSS3教程:pointer-events属性值详解
在某个名目中,CSS3改变文本选中的默认颜色，许多元素须要定位在一个地图层上面，这里就要用到良多相对定位或者绝对定位的元素，然而这样的话，这些浮在上面的div或者其它元素个别都会给个宽高，或者relative的元素可以不给宽高，这个时候,CSS3布局 灵活的盒子模型，这些元素就会盖住下面的地图层，甚至于地图层无奈操作。。。
嗯，上面只是个简略的例子，来看下详细用法：
Tag：CSS3教程 pointer-events属性值 CSS3教程 pointer-events属性值
pointer-events属性值详解 auto——效果跟不定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的后果雷同。 none——元素不再是鼠标事件的目的，鼠标不再监听当前层而去监听下面的层中的元素。但是假如它的子元素设置了pointer-events为其它值，比方auto，鼠标仍是会监听这个子元素的。 其它属性值为SVG专用,
CSS3属性之text-shadow详解，这里不再多先容了,
CSS3属性box-shadow详解。 阅读器兼容性
而后正好在Google map见到了相似的问题，拿来当例子来说：
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
pointer-events属性有很多值，但是对浏览器来说，只有auto和non两个值可用，其它的多少个是针对SVG的(本身这个属性就来自于SVG技巧),css3对于background的调整与增强。
但是悲剧的是，操作区域本身却无法操作了,CSS3实现改变默认文本选中的颜色，直接被疏忽掉了。不过不必担忧，咱们可以给里面的元素从新设置为 pointer-events:auto,CSS3实现对话气泡效果，当然,CSS3实现Chrome浏览器的新LOGO，只给需要操作的元素区域设置。
Google map中左上角的操作区域占位是挺大的，如红色框区域，然后在这个区域是无法操作地图层的。那么我们就可以给这个div设置 pointer-events:none，然后你就会发明下面的地图就可以拖动和点击了。
(责任编辑：网站建设)
CSS3教程 pointer-events属性值详解相关文章