HTML link over text issue
- by user50855
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?
