如何实现CSS鼠标经过变换图片_利用hover伪类修改content-css教程-PHP中文网

不能用 :hover 直接修改 content 实现图片切换，因 content 仅对伪元素生效且不支持响应式图片；可靠方案是 background-image + :hover 或双 + opacity 切换，并确保 hover 图片预加载。

如何实现css鼠标经过变换图片_利用hover伪类修改content

不能直接用 :hover 修改 content 来“变换图片”，因为 content 只对 ::before 和 ::after 伪元素生效，且仅支持替换文本或单张背景图（通过 url()），无法触发真实的 src 切换或响应式图片逻辑。

为什么 `content: url()` 在 `:hover` 里表现不稳定

虽然语法上允许在 ::before:hover 或 ::after:hover 中写 content: url(2.jpg)，但实际中会遇到：

浏览器可能不重绘伪元素（尤其 Chrome 旧版本）
图片加载无 loading 状态，hover 时出现空白闪动
无法设置 alt、无法被屏幕阅读器识别，可访问性为零
不支持 sizes/srcset，响应式图片失效

真正可靠的做法：用 `background-image` + `:hover`

适用于容器尺寸固定、图片仅作装饰的场景（比如图标按钮、卡片封面）。核心是把图片当背景，而非内容：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.icon {
  width: 48px;
  height: 48px;
  background-image: url('icon-default.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon:hover {
  background-image: url('icon-hover.png');
}

必须显式设置 width 和 height，否则伪元素或空容器无法显示背景
推荐用 background-size: cover 或 contain 控制缩放，避免拉伸失真
如果要兼容 IE11，避免使用 background-image: image-set()

需要语义化图片？用两张 + `visibility` 切换

当图片需被搜索引擎索引、支持右键保存、或有 alt 描述时，必须用真实标签：

<div class="img-switcher">
  @@##@@
  @@##@@
</div>

.img-switcher {
  position: relative;
  display: inline-block;
}

.img-switcher .img-default,
.img-switcher .img-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transition: opacity 0.2s;
}

.img-switcher .img-hover {
  opacity: 0;
}

.img-switcher:hover .img-default {
  opacity: 0;
}

.img-switcher:hover .img-hover {
  opacity: 1;
}