大佬教程收集整理的这篇文章主要介绍了HTML – 可能吗? – 一个div叠加层,它被鼠标事件完全忽略(这样鼠标事件只影响下面的div),大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
问题是这个重叠的div将优先于任何鼠标事件,因此它使下面的交互式谷歌地图无用.必须有一种方法可以让重叠的div忽略鼠标事件,让下面的div得到它们. (拜托,拜托!)
或者,还有另一种方法吗?
这是输出的代码:
<div id="pageWrapper" style="display: block; "> <div class="page_content"> <div id="pageShadow"></div> <div id="pageMap"><p><iframe width="1096" height="462" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Baked+Beans+B.V.+i.o.,+Amsterdam,+Nederland&sll=52.365721,4.891641&sspn=0.008648,0.022724&ie=UTF8&hq=baked+beans+bv+io&hnear=Amsterdam,+North+Holland,+The+Netherlands&ll=52.363837,4.891109&spn=0.01664,0.045447&z=14&iwloc=near&cid=2617758725349562441&output=embed"></iframe></p> </div> </div> <div id="page_description"> <p>Text about the company</p> </div> <div id="page_credits"> <div class="rectitle">Job 1</div> <div class="recJob"><p>Description</p> </div> <div class="rectitle">Job 2</div> <div class="recJob"><p>Description</p> </div> <div class="rectitle"></div> <div class="recJob"></div> </div> </div>
这是相关的CSS:
#pageWrapper { position: relative; } .page_content { max-height: 462px; position: relative; } #pageShadow { position: absolute; top:0; left: 0; -moz-opacity: .5; opacity:.5; filter: alpha(opacity=50); BACkground-color: aqua; z-index: 300; min-height:462px; min-width: 1096px; } #pageMap { position: absolute; top:0; left: 0; z-index: 299; min-height:462px; min-width: 1096px; } .rectitle { color: #333; font-size: 21px; font-family: 'ProximaNovaLight','Helvetica Neue',Helvetica,Arial,sans-serif; padding-left: 3px; padding-bottom: 16px; } .rectitle:first-child { padding-top: 10px; } .recJob { padding-left: 3px; padding-bottom: 30px; } #page_description { position: absolute; top:462px; font-family: 'ProximaNovaLight',sans-serif; font-size: 17px; float:left; width:792px; padding: 15px; padding-top:20px; line-height: 22px; font-weight: normal; min-height: 345px; BACkground-color: white; } #page_credits { position: absolute; top:462px; left:822px; padding: 15px 10px 15px 10px; float:right; width:254px; BACkground-color: #f5f5f5; min-height: 350px; }
这就是我想要达到的效果:(顶部的阴影效果)
div overlay http://baked-beans.tv/bb/wp-content/uploads/site-dev/google-map-inner-shadow-div-overlay.jpg
http://hacks.mozilla.org/2009/12/pointer-events-for-html-in-firefox-3-6/
Webkit浏览器可能会有支持,如csS-Tricks的这篇文章所述:
http://css-tricks.com/pointer-events-current-nav/
但不是在IE或Opera中.
以上是大佬教程为你收集整理的HTML – 可能吗? – 一个div叠加层,它被鼠标事件完全忽略(这样鼠标事件只影响下面的div)全部内容,希望文章能够帮你解决HTML – 可能吗? – 一个div叠加层,它被鼠标事件完全忽略(这样鼠标事件只影响下面的div)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。