2

I have a div, which contains an iframe with map and another div overlapping the map.enter image description here

HTML

<div class="locationFinder">
    <iframe width="100%" height="100%" frameborder="0" scrolling="no"
            marginheight="0" marginwidth="0"
            src="https://maps.google.com/?ie=UTF8&amp;t=m&amp;ll=37.449105,-122.16048&amp;spn=0.003918,0.009634&amp;z=16&amp;output=embed">
    </iframe>

    <div class="mapover">
        <p class="titleTextM">Want to learn more?</p>
    </div>
</div>

CSS

.locationFinder {
    position: relative;
    width: 100%;
    height: 425px;
    background-repeat: no-repeat;
}
.mapover {
    position: absolute;
    top: 0;
    width: 100%;
    height: 428px;
    background-repeat: no-repeat;
    background: black;
    opacity: .5;
}

The second div is over map. so I can't perform any operation on it. so my requirement is , user still be able to use the map . Is there any way i can achieve this?

Matt Coughlin
  • 17,170
  • 3
  • 42
  • 57
sabu
  • 1,599
  • 3
  • 16
  • 27

1 Answers1

3

Did you try pointer-events: none; in your mapover css class ? This may require additional CSS for certain versions of ie.

Matt Coughlin
  • 17,170
  • 3
  • 42
  • 57
Jason
  • 311
  • 2
  • 12
  • +1 Didn't know this was possible. I tried it in a [modified demo](http://jsfiddle.net/Matt_Coughlin/Lf2gG/). Seemed to work fine in Firefox and Chrome. It's [not supported](http://caniuse.com/#search=pointer-events) in IE or Opera however (if that matters). – Matt Coughlin May 11 '13 at 14:43
  • I've seen it working in IE with the pnotify alerts library. Should just be a filter. Aha. Same question here: http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements – Jason May 11 '13 at 15:00