求助：如何让网站中鼠标悬停切换的两张图片均具备可点击链接功能？

你的问题核心是可点击区域被悬停生成的内容覆盖，原代码里用div:hover的content属性生成新图片，这个图片会盖在<a>跳转链接的上方，导致点击事件无法触发到链接上。下面给你两种简单的修复方案：

方案一：直接控制图片标签的悬停切换（新手友好） #

这种方法保留<img>标签，通过修改图片的content实现切换，同时让<a>标签包裹整个可点击区域：

/* 给链接设置容器样式，确保尺寸和边框 */
.avatar-link {
  display: inline-block; /* 让a标签支持宽高设置 */
  border: 1px solid #000;
  width: 170px;
  height: 170px;
  margin-bottom: 12px;
}
/* 图片占满整个容器 */
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
}
/* 悬停时切换图片 */
.avatar-link:hover .avatar-img {
  content: url('https://file.garden/ZRo4aD_G0TetIeK6/me2.png');
}

<a href="gallery.html" class="avatar-link">
  <img src="https://file.garden/ZRo4aD_G0TetIeK6/me.png" class="avatar-img" alt="头像">
</a>

方案二：用背景图实现（无img标签） #

这种方法不需要<img>标签，直接把<a>标签做成可点击的背景容器，通过切换背景图实现效果：

.avatar-link {
  display: block;
  border: 1px solid #000;
  width: 170px;
  height: 170px;
  margin-bottom: 12px;
  background-image: url('https://file.garden/ZRo4aD_G0TetIeK6/me.png');
  background-size: cover; /* 背景图适配容器 */
  background-position: center; /* 图片居中显示 */
}
/* 悬停时切换背景图 */
.avatar-link:hover {
  background-image: url('https://file.garden/ZRo4aD_G0TetIeK6/me2.png');
}

<!-- aria-label用于屏幕阅读器识别链接用途 -->
<a href="gallery.html" class="avatar-link" aria-label="跳转至画廊页面"></a>

为什么原代码失效？ #

你原来的结构是<div>包裹<a>和<img>，当鼠标悬停在<div>上时，content属性会在<div>内部生成一张新图片，这张图片会覆盖在<a>标签的上方，导致点击事件被<div>拦截，无法触发跳转链接的点击逻辑。

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