HTML 链接超过文本问题

Question

我需要在整个 div 上添加一个链接，其中包含更多 div。看起来像这样：

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>

所以我在里面放了一个链接，并将其设置为顶部 div 的大小。一切在 Firefox、Safari 和 Chrome 中都运行良好。在 IE 和 Opera 中，每当我将鼠标光标悬停在该区域以及文本上时，光标都会更改为选择光标，而不是手（意味着没有链接）。每当我将光标从文本上移开时，链接就会再次可用。

如何使链接完全“覆盖”文本？我尝试添加 z-index:

div.top
{
  z-index: 0;
}

a.link
{
  z-index: 1;
}

没有帮助。

有什么想法吗？

Answer 1

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>

Answer 2

Ewww，我建议几件事：

1. 使用脚本来更改鼠标悬停时的页面（而不是单击时，这很烦人）并将外部分区设置为具有指针光标（注意：不是 手）。

2. 将所有内容包裹在锚点中，并使用其中的跨度对文本执行不同的操作（请记住，不应该在锚点内包含块级元素）。

您正在做的事情在所有浏览器上的工作方式永远不会相同。

Answer 3

我建议，你最好将 onclick 事件用 js 放置到顶部 div 元素，重定向到你需要的地方。
您还可以使用 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>