HTML link over text issue

Question

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"&gt;&lt;/a&gt;
</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?

Answer 1

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.

Answer 2

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


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

Answer 3

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'"&gt;
  <div class="text1">Text 1</div>
  <div class="text2">Text 2</div>
</div>