CSS无法修改img的src属性，应改用background-image切换或双img+opacity方案；前者适合装饰图，后者保留语义且需预加载和尺寸一致防抖动。
hover 时用 CSS 切换 src 属性不生效？别这么干
直接在 :hover 里试图改 <img src="a.jpg"> 的 src 值是无效的——css 没有操作 html 属性的能力。常见错误是写一堆伪类 + content: url()，结果发现只对 <img> 外层容器（如 <div>）有效，且不支持 alt、加载失败 fallback 等语义功能。
真正可靠的做法是：用两张图 + 两个 <img> 标签，配合 display 或 opacity 控制显隐；或者用背景图 + background-image 切换。
用 background-image + :hover 最稳妥
适合图标、装饰性图片，能精准控制尺寸和居中，且无 alt 语义负担。Bootstrap 自身不干预这个逻辑，纯 CSS 行为。
- 把图片设为容器的背景，不是
<img>标签 - 确保容器有明确宽高（
width/height或padding-top防塌陷） - hover 时只换
background-image，其他样式（如background-size）保持一致，避免抖动
示例：
.icon-btn {
width: 48px;
height: 48px;
background-image: url("icon-default.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.icon-btn:hover {
background-image: url("icon-hover.png");
}
用两个 <img> + opacity 实现平滑过渡
保留原生 <img> 语义（alt、SEO、可访问性），适合内容型图片。注意预加载和过渡时机。
- 两张图都写在 HTML 里，初始状态一个
opacity: 1，另一个opacity: 0 - 父容器设
position: relative，两张图都position: absolute叠在一起 - hover 时用
transition: opacity .2s，避免硬切 - 务必给两张图加
loading="eager"，否则 hover 时首次加载会卡顿
示例结构：
<div class="img-switch"> <img src="cat.jpg" alt="猫" loading="eager"> <img src="cat-hover.jpg" alt="猫（悬停）" loading="eager"> </div>
CSS：
.img-switch {
position: relative;
display: inline-block;
}
.img-switch img {
position: absolute;
top: 0; left: 0;
transition: opacity .2s;
}
.img-switch img:first-child {
opacity: 1;
}
.img-switch img:last-child {
opacity: 0;
}
.img-switch:hover img:first-child {
opacity: 0;
}
.img-switch:hover img:last-child {
opacity: 1;
}
Bootstrap 5 的 data-bs-toggle 或 JS 不适合这种场景
有人想用 Bootstrap 的 Tooltip、Popover 甚至 Collapse 来“模拟” hover 换图，完全没必要。这些组件是为交互态内容设计的，带额外 DOM、事件监听和 ARIA 属性，性能开销大，且 hover 延迟、移出后残留等问题难控制。
-
data-bs-toggle="tooltip"是弹出提示，不是换图工具 - 自己写
mouseenter/mouseleave监听也能做，但纯 CSS 已足够，JS 属于过度设计 - 如果页面已有大量 JS 控制图片，注意
onload事件和src动态赋值的时序问题——浏览器可能还没解码完新图就触发了 hover 出现
真正要小心的，是图片尺寸不一致导致的 layout shift，以及未压缩的 hover 图让首次悬停变慢。这两点比“用什么技术”更影响实际体验。
