求助：鼠标悬停时实现图标等元素的替换显示效果

要实现鼠标悬停时在同一位置替换元素（比如图标），核心思路是让两个目标元素重叠在同一位置，通过:hover伪类控制它们的显示/隐藏状态。你当前的代码逻辑没问题，但CSS选择器写错了——.btn:hover+.icon1是相邻兄弟选择器，而你的图标是.btn的孙子元素（嵌套在<p>里），所以这个选择器无法选中目标图标。

下面是修正后的可行方案：

修正后的代码 #

HTML

<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" />
      </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" />
      </svg></i>
  </p>
</div>

CSS

/* 给图标父容器设置相对定位，让图标绝对定位时以它为基准 */
.up {
  position: relative;
  padding-right: 40px; /* 给图标预留空间，避免文字被覆盖 */
}

.icon, .icon1 {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%); /* 让图标和文字垂直居中对齐 */
  width: 30px;
}

.icon1 {
  display: none; /* 默认隐藏第二个图标 */
}

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

/* 当.btn hover时，切换内部图标的显示状态 */
.btn:hover .icon {
  display: none;
}

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

关键说明 #

1. 定位优化：给.up设置position: relative，让图标绝对定位时基于这个容器，避免用margin硬调位置，适配性更强。
2. 选择器修正：用.btn:hover .icon这种后代选择器，直接选中.btn内部的图标元素，解决原选择器无效的问题。
3. 垂直对齐：通过top:50% + transform: translateY(-50%)实现图标和文字的垂直居中，比固定margin更灵活。

更简洁的优化方案（可选） #

如果只是切换图标形态（比如箭头上下翻转），不需要两个SVG，直接用CSS旋转现有图标即可：

.icon {
  transition: transform 0.2s ease; /* 添加过渡动画，让切换更平滑 */
}

.btn:hover .icon {
  transform: rotate(180deg);
}

这种方式只需要一个SVG，代码更简洁，交互也更流畅。

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