title: Div element is not leading clicks through to enable drag functionalities
body: <p>In my jsfiddle.net/kwoxer/68h7ya6f/3/ I have 2 Div's. One of it shall be a menu, the other one is at the end a SVG that is on the whole page. The SVG also has a zoom-event which shall be toggled everywhere if not a menu element is clicked. </p>
  
  <p>Let's now come to the issue:</p>
  
  <ol>
  <li>When I click and drag the mouse from the top left I actually select the menu div instead of the map div.</li>
  <li>How can I manage that the area around the menu elements is completely transparent. I mean the <strong>background-color none</strong> does not seem to lead clicks trough the div. </li>
  <li>The same issue I have on hidden elements by the way. The area where the div is is not able to clicktrough. So every time I have my mouse there and drag it, I select all the text on the site instead of moving my SVG element via drag&amp;drop from D3.js. Okay the hidden element could be set with width and heigth to 0 at the start. But that's not a solution because that div shall also be transparent by it's elements click-able.</li>
  </ol>
  
  <p>So I think overall it's the question: <strong><em>how can I get a div clicktrough-able and also drag&amp;drop operation going through there</em></strong>.</p>
  
  <p>I already tried the following:</p>
  
  <ul>
  <li><em>pointer-events:none;</em> (makes no sense because I want the menu clickable)</li>
  <li><em>background:white; opacity:0; filter:Alpha(opacity=0);</em> (completely invisible instead of just the unused div space)</li>
  </ul>
  
  <p>What I did not yet try:</p>
  
  <ul>
  <li>background:url('transparent.png');</li>
  </ul>
  
  <h2>Example website with this issue:</h2>
  
  <p><a href="http://lotrproject.com/map/" rel="nofollow">http://lotrproject.com/map/</a> there you can see that when you click in the area under (BLOG, ABOUT, STORE) you are not able to move the map. Actually I have the same kind of issue.</p>
  
  <p>So at the end how can that area be completely transparent. Thank you guys.</p>
  
  <p>Edit: a intersting article about that: <a href="http://blog.pixelastic.com/2010/07/23/click-html-element/" rel="nofollow">http://blog.pixelastic.com/2010/07/23/click-html-element/</a></p>