使用CSS替换<img>标签图片实现Logo hover状态失败求助

嘿，我看了你参照CSS-Tricks教程尝试给WordPress站点Logo加hover切换效果却没成功的问题——核心原因是你的站点HTML结构和教程里的不一样：教程里是直接给独立的.banner图片加样式，而你的Logo是嵌套在<a>标签里的<img>，所以得针对性调整CSS逻辑才行。

下面给你两种适配你站点结构的解决方案，都是纯CSS实现，不用碰JS：

方法一：容器背景图替换（更推荐） #

这个方法是让包裹Logo的<a>标签作为背景图的容器，把原<img>设为透明占位，hover时切换<a>的背景图，兼容性更好，逻辑也更清晰：

第一步：确认Logo尺寸 #

先右键你的Logo→“检查元素”，或者查看图片本身属性，获取它的实际宽高（比如假设你的Logo宽200px、高60px，记得换成你自己的数值）。

第二步：添加CSS代码 #

把这段代码粘贴到你的主题CSS文件里，替换掉括号里的内容：

/* 给Logo的<a>标签设置容器，用背景图显示默认Logo */
.logo.navbar-left a {
  display: inline-block;
  /* 替换成你的Logo实际宽高 */
  width: 200px;
  height: 60px;
  /* 替换成当前显示的Logo图片地址 */
  background: url('http://couill.art/wp-content/uploads/2018/05/logo-Couillart-gif.png') no-repeat center center;
  background-size: contain; /* 保证背景图适配容器，不会变形 */
}

/* 把原<img>设为透明，只保留占位作用，不显示原图片 */
.logo.navbar-left img {
  opacity: 0;
  width: 100%;
  height: 100%;
}

/* hover时切换<a>标签的背景图 */
.logo.navbar-left a:hover {
  /* 替换成hover状态的Logo图片地址 */
  background-image: url('你的hover态Logo图片URL');
}

方法二：基于CSS-Tricks原方法修改 #

如果你想沿用教程的思路，只需要调整选择器和样式参数，适配你的<img>标签：

.logo.navbar-left img {
  display: block;
  box-sizing: border-box;
  /* 替换成你的Logo实际宽高 */
  width: 200px;
  height: 60px;
  /* 数值和width一致，把原图片挤到左侧，让背景图显示出来 */
  padding-left: 200px;
  /* 默认显示的背景图（可以和原img的src一致） */
  background: url('你的默认Logo图片URL') no-repeat center center;
  background-size: contain;
}

/* hover时切换背景图 */
.logo.navbar-left img:hover {
  background-image: url('你的hover态Logo图片URL');
}

几个关键注意点 #

• 确保hover态的图片尺寸和默认Logo一致，避免出现拉伸或变形；
• background-size可以选contain（保持图片比例，完整显示）或cover（铺满容器，可能裁切部分图片），根据你的需求选；
• 图片URL尽量用相对路径（比如/wp-content/uploads/2018/05/hover-logo.png），避免因为域名变化导致路径失效。

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