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

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

div.top
{
  z-index: 0;
}

a.link
{
  z-index: 1;
}

无济于事。

有什么想法吗？

Answer 1

Ewww，我建议的几件事情：

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

您正在做的事情在所有浏览器中永远不会起作用。

Answer 2

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 3

我建议，你最好把onclick事件放到带有js的top 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>

文本问题上的HTML链接

3 个答案: