如何将鼠标悬停在 <li> 元素上并在两个图标之间切换[不使用 JavaScript]

问题描述

每当悬停在列表上时，我都会尝试在 2 个图标之间切换，以便在链接图标上悬停时更改为另一个图标，当我们移除悬停时，它会重置为原始图标。

<li>
 <span class="icons">
      <i class="ic1 far fa-check-circle"></i>
      <i class="ic2 fas fa-volume-up"></i>
 </span>
 <span>
     <a href="">Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do</a>
  </span>
</li>

这是我的js fiddle

任何帮助都会很棒:)

解决方法

即使代码不是最干净的，我想这就是您想要实现的正确目标？

我没有 Font Awesome Icons 这就是为什么我插入了 a 和 b

:root {
    --primary: #005d7a;
    --primary-50: #edf1f2;
    --primary-400: #0094bd;
    --primary-700: #027498;
    --secondary-50: #ffebb7;
    --silver: #3a3a3a;
    --silver-light: #e4e7ea;
    --silver-light-border: #dad7d6;
    --main-background: white;
    --main-page-background: #e4e7ea;
    --main-text-color: #3a3a3a;
    --disabled-color: #ccc;
}

.hidden {
  display: none
}

li:hover .fa-check-circle {
 display: inline;
}

li:hover .fa-volume-up {
 display: none;
}

,

我会在图标中添加 .fa-fw 以防止摆动效果。

li:not(:hover) > .icons > .ic2 {
  display: none;
}

li:hover > .icons > .ic1 {
  display: none;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
<li>
  <span class="icons">
      <i class="ic1 far fa-check-circle fa-fw"></i>
      <i class="ic2 fas fa-volume-up fa-fw"></i>
  </span>
  <span>
    <a href="">Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do</a>
  </span>
</li>