HTML link over text issue

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?

span.text1
{
    float: left;
}
span.text2
{
    clear: left;
    float: left;
}
a.link
{       
}


<a class="link" href="http://something">
    <span class="text1">Text 1</span>
    <span class="text2">Text 2</span>
</a>

Ewww, a couple of things I would suggest:

1. Use scripting to change the page on-mouse-up (not on-click, that's annoying) and set the outer division to have the pointer cursor (note: not hand).

2. Wrap everything in the anchor and use spans inside it to do different things with the text (remember you're not supposed to have block-level elements inside an anchor).

What you're doing will never work the same across all browsers.

I suggest, you would better put onclick event to the top div element with js, that redirects somewhere you need. You can also change mouse cursor to hand with css.

<div style="cursor:pointer;cursor:hand" class="top" onclick="location.href='http://something'">
  <div class="text1">Text 1</div>
  <div class="text2">Text 2</div>
</div>