我试图了解不同的解决方案，但它们似乎都不适用于我的项目。
我得到的最远的是这个；
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为悬停链接时的图标，并在完成后将其切换回原始图标。
该解决方案还应该涵盖移动用户，因此它也必须注册一个触摸输入——我应该如何处理这个问题？
翻过高山走不出你
交互式爱情
相关分类