如何在Outlook的HTML邮件模板中实现悬停隐藏URL且点击正常跳转

• 绝大多数邮件客户端（包括全版本Outlook）出于安全限制，默认禁用所有内嵌JavaScript代码，你当前使用的onclick触发跳转的逻辑完全依赖JS执行，在Outlook环境下不会被触发，因此点击无响应。
• Chrome浏览器没有邮件客户端的JS限制，所以本地测试时功能正常。

要同时满足「点击跳转」和「悬停隐藏目标URL」两个需求，只能用Outlook支持的原生HTML特性实现，不能依赖JS，推荐以下可行方案：

方案1：使用中间跳转页（兼容性最高） #

这是目前邮件营销领域通用的实现方案，具体逻辑：

1. 把a标签的href指向你自己可控的短链接/中间跳转页地址
2. 中间跳转页收到请求后自动302重定向到你要跳转的目标IP/站点地址
   代码示例：

<a href="https://你的跳转服务地址/自定义路径" target="_blank">Click here</a>

优势：

• 100%兼容所有版本的Outlook以及其他所有邮件客户端
• 悬停时用户只能看到跳转服务的地址，看不到最终目标IP，满足隐藏需求
• 还可以额外统计点击数据

方案2：按钮样式遮盖（适配桌面端Outlook） #

如果你不想用中间跳转服务，可以通过CSS把a标签的点击区域完全用按钮样式覆盖，部分版本的Outlook悬停时不会触发URL显示：
代码示例：

<!-- 按钮样式（Outlook支持的基础CSS） -->
<style>
  .email-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #2563eb;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
  }
</style>

<a href="你的目标IP地址" class="email-btn" target="_blank">
  <span style="position: relative; z-index: 1;">Click here</span>
</a>

注意：该方案对少数新版Outlook网页端可能无效，优先推荐方案1。

不要尝试用以下方法实现，Outlook均不支持：

• 任何onclick、onmouseover等JS事件
• window.open、location.href等JS跳转逻辑
• Flash、第三方插件等嵌套内容

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