title: HTML link over text issue
body: <p>I need to add a link over the entirety of a <code>div</code> which contains some more <code>div</code>s. Looks like this:</p>
  
  <pre><code>div.top
  {
    width: 150px;
    height: 150px;
    position: relative;
  }
  
  a.link
  {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 0;
  }
  
  &lt;div class="top"&gt;
    &lt;div class="text1"&gt;Text 1&lt;/div&gt;
    &lt;div class="text2"&gt;Text 2&lt;/div&gt;
  
    &lt;a class="link" href="http://something"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So I put a link inside and made it the size of the top <code>div</code>. Everythign works fine in Firefox, Safari and Chrome. In IE and Opera, whenever I hover mouse cursor over that area but also over a text, the cursor is changing to selection cursor, not a hand (meaning no link). Whenever I move the cursor off the text, the link is available again.</p>
  
  <p>How can I make the link to "cover" the text completely? I tried adding z-index:</p>
  
  <pre><code>div.top
  {
    z-index: 0;
  }
  
  a.link
  {
    z-index: 1;
  }
  </code></pre>
  
  <p>doesn't help.</p>
  
  <p>Any ideas?</p>