HTML/CSS 如何为带a链接的图片添加点击后显示的文字

云原生阿岚

2026-9-26

实现方案

方案1：原生JavaScript实现（功能更灵活）

核心逻辑为阻止a标签默认跳转行为，点击时切换下方文字的显示状态：

<a href="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" class="img-link">
    <img alt="Qries" src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
         width="150" height="70">
    <p class="img-tip" style="display: none;margin: 5px 0 0 0;">此处替换为你要展示的指定文字</p>
</a>

const imgLinks = document.querySelectorAll('.img-link');
imgLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    // 阻止默认跳转图片的行为
    e.preventDefault();
    const tip = this.querySelector('.img-tip');
    // 切换显隐：点击一次显示，再次点击隐藏，不需要切换可直接写tip.style.display = 'block'
    tip.style.display = tip.style.display === 'none' ? 'block' : 'none';
  })
})

方案2：纯CSS实现（无需脚本，轻量简便）

利用focus伪类实现点击显隐，无需写JavaScript代码：

<!-- 加tabindex属性支持元素触发focus，href="javascript:void(0)避免跳转 -->
<a href="javascript:void(0)" tabindex="0" class="css-img-link">
    <img alt="Qries" src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
         width="150" height="70">
    <p class="css-img-tip">此处替换为你要展示的指定文字</p>
</a>

.css-img-link {
  display: inline-block;
  cursor: pointer;
}
.css-img-tip {
  display: none;
  margin: 5px 0 0 0;
}
/* 点击元素获得焦点时显示文字，点击页面其他区域自动隐藏 */
.css-img-link:focus .css-img-tip {
  display: block;
}