如何实现链接内图片的hover切换效果（无需图片事件处理器）

你的原代码失效不是因为外层的a标签，而是**img标签的src属性优先级远高于background-image**——src加载的图片会直接覆盖背景图，所以hover时的背景图根本显示不出来。下面提供两种纯CSS的解决方案，都不需要用到图片标签的事件处理器：

方案一：用背景容器替代img标签 #

把img换成一个固定宽高的容器，用background-image来显示图片，这样hover时直接切换背景图即可：

#imgContainer {
  width: 40px;
  height: 40px;
  background-image: url("https://via.placeholder.com/100");
  background-size: cover; /* 确保背景图填满容器 */
}

/* 鼠标悬停在a标签或容器上时切换背景图 */
a:hover #imgContainer {
  background-image: url("https://via.placeholder.com/100/ff0000");
}

<a href="">
  <div id="imgContainer"></div>
</a>

方案二：叠加两张图片，通过透明度切换 #

在a标签内嵌套一个容器，放入两张图片，默认显示第一张，hover时通过修改透明度切换显示第二张：

.img-wrapper {
  position: relative;
  width: 40px;
  height: 40px;
}

.img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease; /* 加入过渡动画更流畅 */
}

/* 默认隐藏hover图 */
.img-wrapper .hover-img {
  opacity: 0;
}

/* hover时切换两张图的透明度 */
a:hover .default-img {
  opacity: 0;
}
a:hover .hover-img {
  opacity: 1;
}

<a href="">
  <div class="img-wrapper">
    <img class="default-img" src="https://via.placeholder.com/100" alt="默认图片">
    <img class="hover-img" src="https://via.placeholder.com/100/ff0000" alt="悬停图片">
  </div>
</a>

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