嘿David，这个问题其实挺常见的，我给你几个简单直接的解决办法，你挑适合自己的来用就行：

方法1：hover时重写完整的background属性 #

当你只修改background-image时，原来的背景图并不会被移除，只是新图叠在上面。但用完整的background简写属性的话，会直接覆盖之前所有的背景相关设置，旧的背景图自然就被替换掉了：

/* 初始状态 */
.icon-span {
  background: url(icon1.png) no-repeat left center;
}

/* hover状态 */
.icon-span:hover {
  /* 直接用完整的background属性替换，旧图就被覆盖了 */
  background: url(icon2.png) no-repeat left center;
}

方法2：hover时先移除旧背景图 #

如果你不想重写整个属性，也可以先把background-image设为none，再设置新图：

.icon-span:hover {
  background-image: none;
  background-image: url(icon2.png);
}

不过这种写法和方法1效果差不多，方法1会更简洁一些。

方法3：使用CSS雪碧图（推荐） #

如果你的图标尺寸不大，推荐把两张图标合并成一张雪碧图，然后通过调整background-position来切换状态。这样不仅解决了叠加问题，还能减少一次HTTP请求，提升页面性能：

.icon-span {
  /* 假设雪碧图里icon1在左边，icon2在右边，间距20px */
  background: url(icons-sprite.png) no-repeat 0 center;
  /* 记得给span设置合适的宽高，刚好容纳图标 */
  width: 20px;
  height: 20px;
  display: inline-block; /* 让span能设置宽高 */
}

.icon-span:hover {
  /* 移动背景位置，显示雪碧图里的第二张图标 */
  background-position: -20px center;
}

另外小提醒：要确保你的span元素有足够的宽高，否则背景图可能显示不全哦～

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