如何使用CSS实现鼠标悬停切换图片？现有写法不生效该如何解决？

你当前的写法无法生效，是因为<img>标签通过src属性加载的是前景图片，层级永远高于元素的背景层，你给<img>设置的hover背景图会被前景图完全遮挡，自然无法显示。

方案1：纯CSS修改img内容（无需修改HTML结构，新手友好） #

直接通过content属性替换hover状态下<img>的前景内容即可，修改你的CSS代码：

/* 给所有商品图片设置统一尺寸，避免切换时页面跳动 */
.column img {
  width: 100%;
  object-fit: cover;
}

/* 替换你原来的.column1:hover代码 */
.column1:hover {
  content: url(products/walnut-magsafe-stand-hover.jpg);
}
/* 其余三个图片依次添加对应规则即可 */
.column2:hover {
  content: url(products/你的笔记本悬停图路径.jpg);
}
.column3:hover {
  content: url(products/你的平板悬停图路径.jpg);
}
.column4:hover {
  content: url(products/你的显示器悬停图路径.jpg);
}

如果发现hover切换图片时有闪烁，可以添加预加载规则，让页面加载时就把悬停图提前下载：

body::after {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  /* 把所有悬停图的路径都放到content里 */
  content: url(products/walnut-magsafe-stand-hover.jpg) url(products/笔记本悬停图路径.jpg) url(products/平板悬停图路径.jpg) url(products/显示器悬停图路径.jpg);
}

方案2：背景图实现（兼容老旧浏览器） #

如果需要兼容低版本浏览器，可以把<img>标签替换为普通容器，用背景图实现切换：

1. 修改HTML中img部分的代码：

<!-- 把原来的img标签替换成div，其余结构不变 -->
<div class="column">
  <div class="product-img column1"></div>
  <p>Walnut MagSafe Stand</p>
  <p>$120</p>
</div>
<!-- 其余三个column同理修改img为对应class的div -->

2. 添加对应CSS规则：

.product-img {
  width: 100%;
  height: 300px; /* 改为你图片的实际高度 */
  background-size: cover;
  background-position: center;
}
/* 给每个商品设置默认背景图 */
.column1 {
  background-image: url(phone.png);
}
.column1:hover {
  background-image: url(products/walnut-magsafe-stand-hover.jpg);
}
/* 其余三个商品依次设置默认和hover背景图即可 */

内容的提问来源于stack exchange，提问作者AyZed