HTML – 可能吗？ – 一个div叠加层,它被鼠标事件完全忽略(这样鼠标事件只影响下面的div)

概述我在iframe中有一个谷歌地图,并包含在div中.在那个div之上,我有另一个,用于创建凹陷阴影效果. 问题是这个重叠的div将优先于任何鼠标事件,因此它使下面的交互式谷歌地图无用.必须有一种方法可以让重叠的div忽略鼠标事件,让下面的div得到它们. (拜托,拜托！) 或者,还有另一种方法吗？ 这是输出的代码： <div id="pageWrapper" style="display: blo 我在iframe中有一个谷歌地图,并包含在div中.在那个div之上,我有另一个,用于创建凹陷阴影效果.

问题是这个重叠的div将优先于任何鼠标事件,因此它使下面的交互式谷歌地图无用.必须有一种方法可以让重叠的div忽略鼠标事件,让下面的div得到它们. (拜托,拜托！)

或者,还有另一种方法吗？

这是输出的代码：

<div ID="pageWrapper" >    <div >        <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&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Baked+Beans+B.V.+i.o.,+Amsterdam,+Nederland&amp;sll=52.365721,4.891641&amp;sspn=0.008648,0.022724&amp;IE=UTF8&amp;hq=baked+beans+bv+io&amp;hnear=Amsterdam,+north+Holland,+The+Netherlands&amp;ll=52.363837,4.891109&amp;spn=0.01664,0.045447&amp;z=14&amp;iwloc=near&amp;cID=2617758725349562441&amp;output=embed"></iframe></p></div>    </div>    <div ID="page_description">        <p>Text about the company</p>    </div>    <div ID="page_credits">        <div >Job 1</div>        <div ><p>Description</p></div>        <div >Job 2</div>        <div ><p>Description</p></div>        <div ></div>        <div ></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中.

总结

以上是内存溢出为你收集整理的HTML – 可能吗？ – 一个div叠加层,它被鼠标事件完全忽略(这样鼠标事件只影响下面的div)全部内容，希望文章能够帮你解决HTML – 可能吗？ – 一个div叠加层,它被鼠标事件完全忽略(这样鼠标事件只影响下面的div)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。