如何通过 CSS 实现悬停时图标替换（隐藏原图标并显示新图标）-html教程-PHP中文网

本文详解如何使用纯 css 实现按钮悬停时无缝切换两个图标——通过正确的后代选择器控制显示/隐藏状态，避免相邻兄弟选择器（+）误用导致的失效问题。

本文详解如何使用纯 css 实现按钮悬停时无缝切换两个图标——通过正确的后代选择器控制显示/隐藏状态，避免相邻兄弟选择器（+）误用导致的失效问题。

在 Web 开发中，常需实现“悬停切换图标”的交互效果，例如下拉箭头 → 上拉箭头、菜单图标 → 关闭图标等。关键在于：两个图标需定位在同一位置，且仅在父容器被 hover 时触发状态切换。但初学者易陷入一个典型误区：错误使用相邻兄弟选择器（+），导致样式不生效。

✅ 正确思路：使用后代选择器（而非兄弟选择器）

你的 HTML 中，.icon 和 .icon1 是

的子元素，而

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

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

下载

又嵌套在 .btn 内。因此，.btn:hover + .icon1 这类写法完全无效——因为 .icon1 并非 .btn 的直接后继兄弟元素，而是其深层后代。正确方式是使用空格分隔的后代选择器：

.btn:hover .icon {
  display: none;
}

.btn:hover .icon1 {
  display: inline; /* 或 inline-block，确保 SVG 正常渲染 */
}

✅ 完整可运行示例

<div class="btn">
  <p class="up">User Profile
    <i>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></i>
    <i>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon1"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path></svg></i>
  </p>
</div>

.btn {
  position: relative; /* 确保绝对定位子元素以 btn 为参考 */
  padding: 8px 16px;
  cursor: pointer;
}

.up {
  margin: 0;
  position: relative;
}

.icon,
.icon1 {
  width: 30px;
  height: 30px;
  vertical-align: middle;
  margin-left: 7px;
}

.icon {
  position: absolute;
  top: 25px;
  left: 7px;
}

.icon1 {
  position: absolute;
  top: 25px;
  left: 7px;
  display: none;
}

.btn:hover {
  background-color: #170444;
  color: white;
}

.btn:hover .icon {
  display: none;
}

.btn:hover .icon1 {
  display: inline;
}

⚠️ 注意事项与优化建议

定位基准：务必为 .btn 设置 position: relative，使内部 position: absolute 的图标能相对于按钮定位，避免布局偏移。
显示模式：SVG 图标推荐使用 inline 或 inline-block，避免 block 导致换行；若用 display: none / inline 切换，需确保父 元素未设置 display: block 干扰。
无障碍增强：可为两个图标添加 aria-hidden="true"，并在切换时通过 sr-only 文本说明状态变化（如“展开”/“收起”），提升可访问性。

过渡动画（进阶）：如需平滑切换，可添加 opacity 和 visibility 配合 transition，避免生硬闪现：

.icon, .icon1 {
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.btn:hover .icon {
  opacity: 0;
  visibility: hidden;
}
.btn:hover .icon1 {
  opacity: 1;
  visibility: visible;
}

掌握后代选择器的语义与 DOM 结构的对应关系，是实现此类交互效果的基础。无需 JavaScript，纯 CSS 即可完成轻量、高性能的图标悬停替换。