I need to add a link over the entirety of a div which contains some more divs. Looks like this:

div.top
{
  width: 150px;
  height: 150px;
  position: relative;
}

a.link
{
  width: 150px;
  height: 150px;
  position: absolute;
  top: 0;
}

<div class="top">
  <div class="text1">Text 1</div>
  <div class="text2">Text 2</div>

  <a class="link" href="http://something"></a>
</div>

So I put a link inside and made it the size of the top div. 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.

How can I make the link to "cover" the text completely? I tried adding z-index:

div.top
{
  z-index: 0;
}

a.link
{
  z-index: 1;
}

doesn't help.

Any ideas?