当前位置: 网站建设 > 网页设计 > 建站经验 >

CSS3教程 pointer-events属性值详解

时间:2013-03-02 03:43来源:未知 作者:admin 点击:

标签:CSS3教程 pointer-events属性值详解 教程(56)实(7)详解(47)CSS3(90)属性(68)
实在早晓得这个属性, CSS3教程 overflow属性超过一行显示省略号 ,但是始终没有去研讨过。今天正好在twitter看到这个词,就去研究了下,正好解决了目前碰到的一个小困难,所以分享下。嗯,其实这是个比拟简单的CSS3属性。 Firefox 3.6+和chrome 2.0+ 以及saf
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属性值详解相关文章
上一篇:CSS3教程 overflow属性超过一行显示省略号 下一篇:CSS3教程 Transform-变形处理
回到顶部