如何在已添加链接的HTML/CSS图片区域内添加嵌套链接

为什么你的代码会失效？ #

HTML标准明确禁止<a>标签嵌套<a>标签，浏览器遇到这种非法嵌套时会自动修正DOM结构，直接导致外层的图片链接功能失效。

两种可行的修复方案 #

方案1：用JavaScript实现外层区域的跳转

把外层的<a>替换成<div>，通过点击事件实现跳转，同时保留内层独立的<a>标签：

<div class="hero" 
     style="background-image: url(Images/iPhone_14-HERO-SMALL.jpg); margin-top: -15mm; cursor: pointer; tabindex: 0;"
     onclick="window.location.href='https://apple.com/iphone-14';"
     onkeydown="if(event.key === 'Enter') window.location.href='https://apple.com/iphone-14';">
  <header class="titleText">
    <div style="color: #1D1D1E; font-family: SF-Pro-Bold;">iPhone 14</div>
    <div style="color: #1D1D1E; font-size: 7.5mm;">Big and bigger.</div>
    <span style="color: black"><a href="https://apple.com/iphone-14">Learn more ></a></span>
  </header>
</div>

• cursor: pointer：模拟链接的鼠标hover效果
• tabindex和onkeydown：保证键盘可访问性（支持回车跳转）

方案2：拆分结构，用绝对定位分离两个链接

将图片链接和文字区域拆分为独立模块，通过定位让文字区域覆盖在图片上方：

<div class="hero-container" style="position: relative; margin-top: -15mm;">
  <!-- 外层图片链接 -->
  <a href="https://apple.com/iphone-14" style="display: block; width: 100%; height: 100%;">
    <div class="hero" style="background-image: url(Images/iPhone_14-HERO-SMALL.jpg);"></div>
  </a>
  <!-- 文字区域（绝对定位在图片上方） -->
  <header class="titleText" style="position: absolute; top: 0; left: 0; right: 0; z-index: 1;">
    <div style="color: #1D1D1E; font-family: SF-Pro-Bold;">iPhone 14</div>
    <div style="color: #1D1D1E; font-size: 7.5mm;">Big and bigger.</div>
    <span style="color: black"><a href="https://apple.com/iphone-14">Learn more ></a></span>
  </header>
</div>

• position: relative：给容器设置相对定位，作为文字区域的定位参考
• z-index: 1：确保文字区域在图片链接上方，内层链接可正常点击

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