文本问题上的 HTML 链接答案

【问题标题】：HTML link over text issue文本问题上的 HTML 链接
【发布时间】：2010-05-04 16:15:40
【问题描述】：

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

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。 Everythign 在 Firefox、Safari 和 Chrome 中运行良好。在 IE 和 Opera 中，每当我将鼠标光标悬停在该区域以及文本上时，光标都会变为选择光标，而不是手（意味着没有链接）。每当我将光标从文本上移开时，链接就会再次可用。

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

div.top
{
  z-index: 0;
}

a.link
{
  z-index: 1;
}

没用。

有什么想法吗？

【问题讨论】：

标签： html css anchor

【解决方案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>

【讨论】：

【解决方案2】：

Ewww，我建议的几件事：

使用脚本在鼠标上改变页面（不是点击，这很烦人）并将外层设置为指针光标（注意：不是手）。
将所有内容包装在锚点中，并在其中使用跨度对文本执行不同的操作（请记住，不应该在锚点中包含块级元素）。

你正在做的事情在所有浏览器上都不会一样。

【讨论】：

【解决方案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>

【讨论】：