如何在悬停时隐藏浏览器左/右下方的链接信息答案

【问题标题】：How to hide link information at the bottom left/right of the browser on hover如何在悬停时隐藏浏览器左/右下方的链接信息
【发布时间】：2015-08-05 07:20:23
【问题描述】：

当您悬停超链接时，如何创建一个在左下角或右下角不显示其信息的链接（这取决于链接的位置）？假设我们有一个这样的链接：

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

我们想要隐藏它的信息，或者更准确地说，它显示在浏览器左下角的超链接信息，如下图所示：

现在，我知道这是可能的，因为 Stack Exchange 网络站点本身在您第一次访问每个站点时将其用于首页上显示的 "Welcome Banner"。

如果您将鼠标悬停在任何链接上：

任何人都可以提出问题
任何人都可以回答
最佳答案被投票并上升到顶部

您会看到没有显示hyperlink 信息。查看下面的图片以查看"Welcome Banner"

【问题讨论】：

你为什么要这样做？
我认为这非常适合“不良”网站，例如网络钓鱼尝试

标签： html hyperlink

【解决方案1】：

纯html和css是做不到的。为此，您必须使用 javascript。显示锚标记的链接正是大多数浏览器的工作方式。用户还希望能够看到他将被重定向到哪里。

但是可以做到：你可以避免使用锚标签。然后让另一个属性保存 href - 例如“data-href”。然后在基于该属性重定向的a标签上绑定一个click事件。

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

这是可以做到的，但请注意，sn-ps 不能在 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;
}

&lt;span data-href="http://www.google.com"&gt;test&lt;/span&gt;

【讨论】：

爬虫肯定看不到链接。
没什么大不了的，但是因为我们正在模仿一个 href（但不是让它在左下角显示链接），所以最好使用 window.location.href = ele.getAttribute('data-href') 而不是 window.location.replace(ele.getAttribute('data-href')) 因为使用 @987654326 @ 表示该人在单击后退按钮后将无法返回到他们所在的位置，因为历史记录已被新链接替换，但也未存储为 href 作品。另外我认为使用forEach 而不是完整的for循环会更好，代码更少。

【解决方案2】：

stackoverflows Anybody can ask a question-Link 不是超链接。它是一个 HTML 元素（在本例中是一个 li 元素）：

<li id="q">Anybody can ask a question
</li>

使用 CSS cursor: pointer; 和 click-Eventlistener。

【讨论】：

【解决方案3】：

在深入挖掘之后，我在w3schools article 上找到了一个更简单、更容易的解决方案，并且在question in SO 的帮助下，我可以设法在新窗口中打开它：

<button id="anchorID" >Go to page</button>

$("#anchorID").click(function() {
    window.open(
    'http://www.w3schools.com',
    '_blank' // <- This makes it open in a new window.
    );
});

Jsfiddle 现场示例：http://jsfiddle.net/6sLzghhm/

【讨论】：

【解决方案4】：

从链接中删除 href="whatever" 并通过调用函数打开链接。这将完全删除页面左下方的链接预览。

HTML-

<a (click)="openUrl('https://google.com')">

JS-

  openUrl(url: string): void {
    window.open(url, '_blank');
  }

【讨论】：

【解决方案5】：

最简单的答案就是使用-

<p onclick="window.open('Your Link')">Blah Blah Blah</p>

简单！

您也可以一次打开更多链接-

HTML：

<p onclick="OpenTwoLinks()">Google And StackOverFlow</p>

Javascript：

function OpenTwoLinks() {
   
  window.open('https://google.com');
   
  window.open('https://stackoverflow.com');
}

【讨论】：