鼠标悬停图片切换显示的HTML/CSS问题求助

嘿，我来帮你搞定这个悬停图片切换的问题！你现在遇到的问题其实很常见——用<img>标签加hover背景图的时候，原图片（来自src属性）会一直显示在最上层，把背景图给挡住了，而且背景图默认不会自动填满整个元素，所以才会出现重叠和适配不良的情况。

下面给你两种简单有效的解决思路：

方法1：用背景图代替<img>标签（推荐） #

把元素换成<div>，通过背景图来实现切换，这样就不会有两张图片重叠的问题，还能更好地控制图片的显示方式：

<div id="Library"></div>
<style>
#Library {
  height: 70px;
  width: 120px;
  /* 默认显示的图片 */
  background-image: url('LibraryTransparent.png');
  /* 让背景图适配元素大小，cover会填满元素（可能裁剪），contain会完整显示图片 */
  background-size: cover;
  /* 禁止背景图重复 */
  background-repeat: no-repeat;
  /* 可选：让背景图居中 */
  background-position: center;
}
#Library:hover {
  /* 悬停时切换为目标图片 */
  background-image: url('LibraryHoverTrans.png');
}
</style>

方法2：保留<img>标签，替换src内容 #

如果你必须保留<img>标签（比如需要alt属性做SEO优化），可以用content属性在hover时直接替换图片源：

<img src="LibraryTransparent.png" id="Library" alt="Library" />
<style>
#Library {
  height: 70px;
  width: 120px;
}
#Library:hover {
  /* 悬停时替换图片 */
  content: url('LibraryHoverTrans.png');
  /* 强制保持设置的宽高，避免图片变形 */
  height: 70px;
  width: 120px;
}
</style>

额外注意点 #

• 尽量让两张图片的实际尺寸和你设置的70px/120px接近，避免拉伸变形；
• background-size的取值可以根据需求调整：cover填满元素（可能裁剪边缘），contain完整显示图片（可能留空白），也可以设具体的宽高比如120px 70px；
• 第二种方法的content属性在现代浏览器中都支持，兼容性没问题。

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