如何实现链接覆盖整张图片，使鼠标悬停全图可点击？

要实现鼠标悬停在图片任意位置都能触发链接，只需调整HTML结构和CSS样式，让链接元素覆盖整个图片容器即可：

修改后的HTML代码 #

<div class="moduledata">
  <a href="{{seourl}}" class="full-link"></a>
  <h5>{{title}}</h5>
  <figure><img src="{{pageThumb}}"/></figure>
</div>

修改后的CSS代码 #

.moduledata{
  position: relative;
  width: auto;
  margin: 0px !important;
  max-width: 380px;
  display: inline-block; /* 确保容器高度由图片撑开 */
}

/* 全屏覆盖的链接元素 */
.moduledata .full-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.moduledata > h5 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 2; /* 确保标题在链接上方不被遮挡 */
  margin: 0;
  color: #000000;
  font-weight: 300;
  font-size: 38px;
}

.moduledata:hover h5 {
  visibility: visible;
}

.moduledata h5 {
  visibility: hidden;
}

关键修改说明 #

• 新增绝对定位的.full-link元素，占满.moduledata容器的全部区域，鼠标悬停在容器内任意位置（包括图片）都能触发链接
• 给标题h5设置更高的z-index，保证标题文字不会被链接元素遮挡，正常显示
• 给.moduledata添加display: inline-block，确保容器高度由图片内容撑开，链接元素能完整覆盖容器

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