如何在悬停时更改图标（fontawesome 图标）

Question

当用户将鼠标悬停在图标上时，我试图更改图标。我确实在 StackOverflow链接上找到了类似的问题，但是当我尝试这个时，它并不是那么有效。当我将光标放在屏幕上时，它开始滞后。所以我想知道是否有更好的方法使用 javascript 来做到这一点。

这是我的代码

索引.html

<li class="nav-item hide-on-mb icon-box">
    <a href="#" class="nav-link ">
        <i class="fas fa-bars menu"></i>
        <i class="fas fa-times cross"></i>
    </a>
</li>

main.css

.icon-box {
        .cross {
            display: none;
        }
        :hover .menu {
            display: none;
        }
        :hover .cross {
            display: block;
        }
    }

Answer 1

使用 onmouseover 和 onmouseout 事件：

<i class="fas fa-times cross" onmouseover="this.className = 'fas fa-times cross'"; onmouseout="this.className='whatever the other class name is'" ></i>