能否通过CSS实现悬停其他元素（如div）时修改img的src属性？

嘿，这个问题问得很典型！直接用纯CSS修改<img>元素的src属性其实是做不到的——毕竟CSS负责的是样式渲染，没法直接修改DOM的属性值。不过咱们可以用一些CSS技巧来实现视觉上的图片切换效果，看起来就像是替换了src一样，给你分享两种实用的方案：

方案一：用背景图替代<img>标签 #

把需要切换图片的元素改成一个容器，用CSS背景图来实现默认和悬停状态的切换，这种方法兼容性很好：

<!-- 触发悬停的元素 -->
<div class="hover-trigger">鼠标悬停我试试</div>
<!-- 展示图片的容器 -->
<div class="image-box"></div>

.image-box {
  width: 250px;
  height: 250px;
  /* 默认显示的图片 */
  background-image: url('default-pic.jpg');
  background-size: cover;
  background-position: center;
  transition: background-image 0.3s ease;
}

/* 当鼠标悬停在触发元素上时，切换图片容器的背景图 */
.hover-trigger:hover ~ .image-box {
  background-image: url('hover-pic.jpg');
}

注：这里的~是CSS兄弟选择器，要求触发元素和图片容器是同级元素。如果是想让父元素悬停时切换，直接用.parent:hover .image-box就行。

方案二：叠加两张<img>标签，通过透明度切换 #

如果必须要用<img>标签，可以把两张图叠加在一起，通过opacity控制显示隐藏：

<div class="hover-trigger">悬停这里换图</div>
<div class="img-wrapper">
  <img src="default.jpg" alt="默认图片" class="base-img">
  <img src="hover.jpg" alt="悬停图片" class="hover-img">
</div>

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

.img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hover-img {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 悬停触发时显示第二张图 */
.hover-trigger:hover ~ .img-wrapper .hover-img {
  opacity: 1;
}

如果一定要修改src属性怎么办？ #

如果你的需求是真正修改<img>的src属性值，那只能借助JavaScript来实现了，代码也很简单：

// 获取元素
const trigger = document.querySelector('.hover-trigger');
const targetImg = document.querySelector('.target-img');

// 悬停时换图
trigger.addEventListener('mouseover', () => {
  targetImg.src = 'hover-pic.jpg';
});

// 鼠标离开时恢复原图
trigger.addEventListener('mouseout', () => {
  targetImg.src = 'default-pic.jpg';
});

总结一下：纯CSS没法直接修改src属性，但能实现视觉上的图片切换；如果需要修改属性本身，就得用JS来帮忙啦。

内容的提问来源于stack exchange，提问作者Pavel Boroda Ignatenko