如何不使用JavaScript实现<li>元素hover时两个图标切换效果

方案1：纯CSS实现（推荐） #

默认状态下显示第一个图标、隐藏第二个，监听li的hover状态反转显示规则即可，无需额外JS逻辑，性能更高：

/* 基础样式规则 */
.icons .ic1 {
  display: inline-block;
}
.icons .ic2 {
  display: none;
}

/* 悬停状态切换显示逻辑 */
li:hover .icons .ic1 {
  display: none;
}
li:hover .icons .ic2 {
  display: inline-block;
}

如果需要平滑过渡效果，可以改用opacity和定位实现淡入淡出：

.icons {
  position: relative;
  display: inline-block;
}
.icons i {
  transition: opacity 0.2s ease;
}
.icons .ic2 {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
li:hover .icons .ic1 {
  opacity: 0;
}
li:hover .icons .ic2 {
  opacity: 1;
}

方案2：JS实现 #

如果有特殊场景需要用JS控制，可以监听li的鼠标进入/移出事件切换图标显示：

// 遍历所有li元素绑定事件
document.querySelectorAll('li').forEach(li => {
  const ic1 = li.querySelector('.ic1')
  const ic2 = li.querySelector('.ic2')
  // 鼠标进入显示ic2
  li.addEventListener('mouseenter', () => {
    ic1.style.display = 'none'
    ic2.style.display = 'inline-block'
  })
  // 鼠标移出恢复显示ic1
  li.addEventListener('mouseleave', () => {
    ic1.style.display = 'inline-block'
    ic2.style.display = 'none'
  })
})

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