如何在锚悬停时在左下角显示与所述锚的 href 属性不同的 link？

Question

我最近注意到 Google 搜索结果。使用最新版本的 Firefox 时，如果您将鼠标悬停在 Google 搜索结果提供的 link 上，左下角会显示一个漂亮的 link，但是如果您检查 [=44] =] 你看 link 实际上是别的东西。 A link 到根即。 google.com 带有附加的查询变量，我认为当您单击 link 时会将您重定向到实际页面。

我想知道这怎么可能，在左下角显示完全不同的 link。我看到有类似的问题，都建议使用 js 或使用按钮进行回火。但是我想知道是否有人确切地知道 Google 是如何做到这一点的？

编辑：让我们看一个例子来说明我的意思。如果我搜索：维基百科，这些就是结果。没什么特别的吧？

如果我将 link 悬停在此处没有什么特别之处，我希望 wikipedia.org

哈，但我错了，这才是真正的 link！维基百科上面高亮的标题是link.

如果我使用 ctrl + click 或 cmd + click 会怎样？真正的 link 被辱骂，页面在新标签页中打开。

现在如何实现这一目标？我认为它是 js 操纵浏览器 window 而我还没有找到一种方法来做这件事。

注意：此行为在 Firefox 和 Safari 上是正确的，但不是 Chrome。在 Chrome 上，href 标签是实际的 link 但使用属性 ping。

Answer 1

它应该适用于 <a href="http://theLinkInTheBottomLeft">https://theDisplayedLink</a>

因此，由于 a 标签提供 1. href link，即您将被重定向到的 link 及其括号中的内容，您可以区分可见的和可操作的。

Answer 2

我不能确定 Google 是如何处理这个的，因为他们的 JS 被丑化了，但如果我不得不猜测，我认为它会是这样的：

通过查看搜索结果的 DOM 结构，a 元素有 href 预览 link 和另一个标签 ping 实际 link.在 JS 中单击它会设置 ping 位置（防止默认行为）。

下面是如何实现的代码。

window.addEventListener('load', () => {
  let element = document.getElementsByTagName('a')[0]
  element.addEventListener('mousedown', (event) => {
    event.target.setAttribute('href', event.target.getAttribute('other'))
  })
})

<a href="http://google.com/" other="http://bing.com/">Link</a>

以下是替代方法，但它不适用于中键单击。

window.addEventListener('load', () => {
  let element = document.getElementsByTagName('a')[0]
  element.addEventListener('click', (event) => {
    event.preventDefault()
    let link = event.target.getAttribute('other')
    window.location.href = link
  })
})

<a href="http://google.com/" other="http://bing.com/">Link</a>

如何在锚悬停时在左下角显示与所述锚的 href 属性不同的 link？

How to display a different link in the bottom left corner on anchor hover than the href attribute of the said anchor?

html

javascript

safari

firefox

search