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

前端之家收集整理的这篇文章主要介绍了HTML – 可能吗? – 一个div叠加层,它被鼠标事件完全忽略(这样鼠标事件只影响下面的div)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在iframe中有一个谷歌地图,并包含在div中.在那个div之上,我有另一个,用于创建凹陷阴影效果.

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

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

这是输出代码

  1. <div id="pageWrapper" style="display: block; ">
  2. <div class="page_content">
  3. <div id="pageShadow"></div>
  4. <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>
  5. </div>
  6. </div>
  7.  
  8. <div id="page_description">
  9. <p>Text about the company</p>
  10. </div>
  11.  
  12. <div id="page_credits">
  13.  
  14. <div class="recTitle">Job 1</div>
  15. <div class="recJob"><p>Description</p>
  16. </div>
  17.  
  18. <div class="recTitle">Job 2</div>
  19. <div class="recJob"><p>Description</p>
  20. </div>
  21.  
  22. <div class="recTitle"></div>
  23. <div class="recJob"></div>
  24.  
  25. </div>
  26.  
  27. </div>

这是相关的CSS:

  1. #pageWrapper {
  2. position: relative;
  3. }
  4.  
  5. .page_content {
  6. max-height: 462px;
  7. position: relative;
  8. }
  9.  
  10. #pageShadow {
  11. position: absolute;
  12. top:0;
  13. left: 0;
  14. -moz-opacity: .5;
  15. opacity:.5;
  16. filter: alpha(opacity=50);
  17. background-color: aqua;
  18. z-index: 300;
  19. min-height:462px;
  20. min-width: 1096px;
  21. }
  22.  
  23. #pageMap {
  24. position: absolute;
  25. top:0;
  26. left: 0;
  27. z-index: 299;
  28. min-height:462px;
  29. min-width: 1096px;
  30. }
  31.  
  32. .recTitle {
  33. color: #333;
  34. font-size: 21px;
  35. font-family: 'ProximaNovaLight','Helvetica Neue',Helvetica,Arial,sans-serif;
  36. padding-left: 3px;
  37. padding-bottom: 16px;
  38. }
  39.  
  40. .recTitle:first-child {
  41. padding-top: 10px;
  42. }
  43.  
  44. .recJob {
  45. padding-left: 3px;
  46. padding-bottom: 30px;
  47. }
  48.  
  49. #page_description {
  50. position: absolute;
  51. top:462px;
  52. font-family: 'ProximaNovaLight',sans-serif;
  53. font-size: 17px;
  54. float:left;
  55. width:792px;
  56. padding: 15px;
  57. padding-top:20px;
  58. line-height: 22px;
  59. font-weight: normal;
  60. min-height: 345px;
  61. background-color: white;
  62. }
  63.  
  64. #page_credits {
  65. position: absolute;
  66. top:462px;
  67. left:822px;
  68. padding: 15px 10px 15px 10px;
  69. float:right;
  70. width:254px;
  71. background-color: #f5f5f5;
  72. min-height: 350px;
  73. }

这就是我想要达到的效果:(顶部的阴影效果)
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相关文章