网页设计 加入小组

2个成员 62个话题 创建时间:2014-10-20

网页设计教程:Div穿透

发表于 2014-12-03 872 次查看

网页设计教程:Div穿透

 

在做网页设计的时候有时候会碰到两个图片放到一个div里面,并且还要全部显示,还要咋滴,反正就是好多要求,下面由51RGB小编Q群162542073整理的,关于这个div穿透的问题,分享一下:

当你有2个div叠在一起时,一般是下面的div显示主要内容如图片,上面div显示说明。

但是你往往有一个连接在下面的div上,然而由于特殊原因你上面的div会完全盖住底下的。此时点击不能。

此时有一个css属性可以调节:pointer-events。前提是上面的div有很多的空白,没有背景颜色没有背景图片等。

上面的div可以用pointer-events: none;

此时上面的div被穿透了。

如果你上面的div有比较小的ul标签或li标签用来显示文字,可以用pointer-events: auto;,此时li标签仍然是点击有效的。

 

扩展阅读:

Pointer-events原本来源于SVG,目前在很多浏览器中已经得到体现。不过,要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events,基本上可以将它设置为auto,这是正常的行为,而“none”是一个有趣的属性。

如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件,而是让事件穿过该元素到达下面的元素。

51RGB在线教育官网指定学习Q162542073 更多免费教程,素材,源文件等,请前往www.51rgb.com


责任声明:本套系列教程视频版权所属51rgbg官网,任何团体和个人未经本网允许不得转载,违者必究。

网页设计视频网站链接http://www.51rgb.com/mproductzh.aspx?classid=31

51RGB网络营销教程       http://www.51rgb.com/mproductzh.aspx?classid=38
更多视频教程请前往51rgb官网  http://www.51rgb.com


adobe软件  Ps视频   AI视频  DW视频   网络营销视频集锦

http://yun.baidu.com/share/home?uk=271892183&view=album

 

豆瓣 网站网页设计小组

http://www.douban.com/group/520499/

 奋斗的新浪博客

http://blog.sina.com.cn/u/1748316330

帆的QQ空间

http://user.qzone.qq.com/113125174/main

风生水起博客

http://fengshengshuiqi06.blog.163.com/manage/#m=0&t=0

 

 

 

发表回复
功能维护升级中,维护完成完后将再次开放,非常抱歉给您学习造成的不便。
话题作者
51RGB教育
头衔:
活跃成员