时间戳

首页 > 解决方案 > 如何将鼠标悬停在

  • 元素并在 2 个图标之间切换[无 JavaScript]

    • html - 如何将鼠标悬停在
  • 元素并在 2 个图标之间切换[无 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 小提琴

    任何帮助都会很棒:)

    标签： htmlcsshoverfont-awesome

    解决方案

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

    我没有 Font Awesome 图标，这就是我插入a和b的原因

    .hidden {
  display: none
}

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

li:hover .fa-volume-up {
 display: none;
}
     <li>
   <span class="icons">
      <i class="ic1 far hidden fa-check-circle">a</i>
      <i class="ic2 fas fa-volume-up">b</i>
  </span>
  <span>
    <a href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</a>
  </span>
</li>

    推荐阅读