Я пытался найти разные решения, но ни одно из них не работает для моего проекта.
Самое дальнее, что у меня было, было с этим;
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>
Но проблема здесь в том, что я не знаю, как вернуть значок в нормальное состояние после его изменения без использования stati c класс. Я бы хотел избежать использования класса stati c, потому что один и тот же сценарий будет работать на страницах с разными значками, поэтому классы будут отличаться от страницы к странице.
Другая проблема, похоже, заключается в том, что сценарий запускается несколько раз во время одного наведения мыши, как показывает console.log.
Моя цель - просто изменить текущий значок на fa-arrow-left при наведении курсора мыши и переключить его обратно на исходный значок, как только это будет сделано .
Решение также должно охватывать мобильных пользователей, поэтому ему также придется регистрировать сенсорный ввод - как мне подойти к этому?