使用JavaScript隐藏完整推荐链接时，如何设置hover显示指定URL？

要实现「悬停显示干净URL、点击打开带推荐码的链接」的需求，只需通过以下两步修改代码：

1. 调整HTML标签 #

给原<a>标签添加href属性（值为你想悬停时显示的干净URL），同时调整onClick的调用方式：

<a href="http://www.somesite.com" onClick="return navigate(true);">Some hyperlink text</a>

2. 修改JavaScript函数 #

让函数执行自定义跳转后，返回false以阻止<a>标签的默认跳转行为：

function navigate(newTab) {
  // 创建用于跳转的隐藏a元素
  const a = document.createElement('a');
  // 设置带推荐码的目标链接
  a.href = "http://www.somesite.com/some_long_referal_code";
  // 开启新标签页
  if (newTab) {
    a.target = '_blank';
  }
  // 触发跳转
  a.click();
  // 阻止原a标签的默认跳转（避免同时打开两个页面）
  return false;
}

原理说明 #

• 浏览器悬停<a>标签时，会显示其href属性的值，因此我们把这个值设为干净的主域名http://www.somesite.com。
• 点击时，通过自定义函数创建隐藏的<a>元素，打开带推荐码的链接，同时返回false阻止原标签的默认跳转，确保只有推荐链接被打开。

内容的提问来源于stack exchange，提问作者docHoliday