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

时间:2015-05-23 08:47:51

标签: html hyperlink

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

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

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

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

如果您悬停任何链接:

  • 任何人都可以提出问题

  • 任何人都可以回答

  • 最佳答案被投票并升至顶部

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

5 个答案:

答案 0 :(得分:4)

使用纯html和css无法做到这一点。你必须使用javascript。显示锚标记的链接就是大多数浏览器的工作方式。此外,用户希望能够看到他将被重定向到哪里。

但是可以做到:你可以避免使用锚标签。然后有另一个属性保持href - 像&#34; data-href&#34;。然后在基于此属性重定向的标记上绑定click事件。

但是,我不会这样做 - 因为我不确定抓取工具是否会看到链接。

这是如何做到的,但请注意,片段不能在SO外重定向:)

&#13;
&#13;
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'));
    });    
}
&#13;
span[data-href]{
    cursor:pointer;
}
&#13;
<span data-href="http://www.google.com">test</span>
&#13;
&#13;
&#13;

答案 1 :(得分: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/

答案 2 :(得分:0)

stackoverflows <link rel="stylesheet" href="https://mystaticdomain.com/css/style.css"> <script src="https://mystaticdomain.com/js/jquery-1.11.2.min.js"></script> - 链接不是超链接。它是一个HTML元素(在本例中是一个li-Element):

Anybody can ask a question

使用CSS <li id="q">Anybody can ask a question </li> 和click-Eventlistener。

答案 3 :(得分:0)

从链接中删除href =“任何内容”,然后通过调用函数打开链接。这将完全删除页面左下方的链接预览。

HTML-

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

JS-

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

答案 4 :(得分:0)

最简单的答案就是使用-

<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');
}