bootstrap如何实现鼠标经过更改图片

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 图让首次悬停变慢。这两点比“用什么技术”更影响实际体验。