我在iframe中有一个谷歌地图,并包含在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
解决方法
它可以在Firefox 3.6中得益于它对“pointer-events”属性的支持,正如Mozilla Hacks的这篇文章中所解释的那样:
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中.