html - 为什么此链接不会锚定在左键单击打开的跨度周围？

Question

我试图了解如何创建一个可以在 div 中的任何位置单击的链接，并从另一个堆栈交换问题中找到了解决我的问题的方法 which can be found here.

它的概念很简单，看起来应该可行，但我对这项技术有疑问。具体来说，尽管光标指示它已找到链接，但单击该链接将不会导致页面移动。但是，右键单击我想成为链接的区域并选择“在新选项卡中打开”将引导我到链接的内容。

HTML:

<div class="container">
hello
    <a href="https://www.google.com">
        <span class="link-spanner"></span>
    </a>
</div>

CSS:

.container{
    width:200px;
    height:200px;
    background-color:black;
    color:white;
    /*Important:*/
    position:relative;
}

/*Important:*/
.link-spanner{
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 1;

  /* edit: fixes overlap error in IE7/8, 
  make sure you have an empty gif 
  background-image: url('empty.gif');*/
}   

为什么我的浏览器可以识别链接但在左键单击时无法打开该链接，这是有原因的吗？我正在使用 chrome 版本 39。可以找到相同的行为 in this JSFiddle page这是来自上面提供的答案的评论之一。左键单击链接不会像它应该的那样将我定向到谷歌。

Answer 1

将 target="_blank" 添加到您的 html 中:

<a href="https://www.google.com" target="_blank">
<!-- Code -->
</a>

这是 fiddle .

问候，

米兰。