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

作者：袖梨 2026-07-24

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;}