如何在悬停时隐藏浏览器左下角的链接信息

Question

当您悬停超链接时,如何创建一个不在左下角或右下角显示其信息的链接(这取决于链接的位置)？可以说我们有这样的链接:

 <a href="/users">Users</a>

我们希望隐藏其信息,或者更确切地说是隐藏在浏览器左下角的超链接信息,如下图所示:

现在,我知道这是可能的,因为Stack Exchange网络站点本身"Welcome Banner"会在首次访问每个站点时将其用于首页上显示的内容.

如果您悬停任何链接:

• 任何人都可以提问

• 任何人都可以回答

• 最好的答案被投票并上升到顶部

您将看到没有hyperlink显示任何信息.查看下面的图片以查看"Welcome Banner"

Answer 1

纯HTML和CSS不能做到这一点。您必须为此使用javascript。显示锚标记的链接就是大多数浏览器的工作方式。用户还希望能够看到他将被重定向到的位置。

但这是可以做到的：您可以避免使用锚标记。然后让另一个属性保存href，例如“ data-href”。然后，将点击事件绑定到基于此属性重定向的标签上。

但是，我不会这样做-因为我不确定爬虫是否会看到该链接。

这是可以完成的方法，但是请注意，摘要无法重定向到SO之外：)

var aTags = document.querySelectorAll('span[data-href]');

for(var i = 0; i < aTags.length; i++){
    var aTag = aTags[i];
    aTag.addEventListener('click', function(e){
        var ele = e.target;
        window.location.replace(ele.getAttribute('data-href'));
    });    
}

span[data-href]{
    cursor:pointer;
}

<span data-href="http://www.google.com">test</span>