title: Put a blanket over a div to "disable" all controls within the div
body: <p>I made a short example of what I have so far <a href="http://jsfiddle.net/43MjD/" rel="nofollow">in this jsfiddle</a>, but the thing I want to be possible is that when you move your mouse over the div, and you click on a point of the div where there is a textbox (in this example), you do not interact with the textbox, you still only interact with the div. Like if there was an invisible blanket over the textbox, and you trigger the click event of the blanket, but do not gain focus on the textbox. </p>
  
  <p>I have searched a bit around and not a lot of people seem to have asked about this, but I found someone saying I could use a transparent image (1x1 px) of the containing div, and make it repeat like so </p>
  
  <pre><code>background-image: url('transparent.png');
  background-repeat: repeat;
  </code></pre>
  
  <p>But to no avail. It is still possible to "click through" the div. I also tried setting </p>
  
  <pre><code>background: rgba(170, 170, 170, 0);
  </code></pre>
  
  <p>and </p>
  
  <pre><code>opacity: 0;
  </code></pre>
  
  <p>of the transparent div, and it was still click-through. I have also fiddled with some z-index, and that made no difference either (setting the z-index of the blanket to a higher value than the z-index of the textbox). </p>