我試圖了解不同的解決方案，但它們似乎都不適用于我的項目。我得到的最遠的是這個；function onBackButtonHover() {    const backButton = document.getElementById("page-controls").querySelector(".fas");    $(backButton).removeClass();    $(backButton).addClass("fas fa-arrow-left");    $(backButton).mouseout(function(){        console.log("Hello.");    });}page-controls .navbar-brand {    background-color: #54aaff;    position: absolute;    left: 0;    top: 0;    bottom: 0;    width: 56px;    padding: 0;    margin: 0;    text-align: center;    color: #fff;    transition: transform .25s ease-in-out;}#page-controls .navbar-brand:focus, #page-controls .navbar-brand:hover {    color: #fff;    transform: scale(.85);}#page-controls .navbar-brand .fas {    font-size: 32px;    margin: 12px auto;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link href="//dfzlwjdb9r0y9.cloudfront.net/fa/css/all.css" rel="stylesheet"><a id="backButton intranet" class="navbar-brand" href="/dashboard" onmouseover="onBackButtonHover()">    <i class="fas fa-user-lock"></i></a>但是這里的問題是我不知道如何在不使用靜態類的情況下將圖標恢復正常，一旦它被更改。我想避免使用靜態類，因為相同的腳本會在具有不同圖標的頁面上運行，因此類會因頁面而異。另一個問題似乎是腳本在一次鼠標懸停期間運行了多次，如圖console.log所示。我的目標是簡單地將當前圖標更改fa-arrow-left為懸停鏈接時的圖標，并在完成后將其切換回原始圖標。該解決方案還應該涵蓋移動用戶，因此它也必須注冊一個觸摸輸入——我應該如何處理這個問題？