在 hover 上的 Font-Awesome 图标之间切换

Question

我试图了解不同的解决方案，但它们似乎都不适用于我的项目。

我得到的最远的是这个；

 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>

但这里的问题是，我不知道如何在不使用 static class 的情况下将图标恢复到正常状态。 我想避免使用 static class，因为相同的脚本将在具有不同图标的页面上运行，因此类会因页面而异。

如console.log所示，另一个问题似乎是在鼠标悬停期间多次运行脚本。

我的目标是在链接悬停时简单地将当前图标更改为fa-arrow-left ，并在完成后将其切换回原始图标。

该解决方案还应该涵盖移动用户，因此它还必须注册一个触摸输入 - 我应该如何处理这个？

Answer 1

如果我猜对了，这很简单

 $('document').ready(function() { $('#backButton').on( "mouseover", function() { $('#backButton > i').removeClass('fa-user-lock').addClass('fa-arrow-left'); }); $('#backButton').on( "mouseout", function() { $('#backButton > i').removeClass('fa-arrow-left').addClass('fa-user-lock'); }); });

 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /> <a id="backButton" class="navbar-brand" href="/dashboard"> <i class="fas fa-user-lock"></i> </a>

现在你问题的第二部分 - 如何不对类名进行硬编码？ 好吧，显然你需要做这样的事情 - 阅读活动元素的 class，记住它并在鼠标悬停时使用......像这样......（我将backButton ID 更改为 class 以显示多个图标示例）

 $('document').ready(function() { // Remember active class let tmpClass; // On mouse over $('.backButton').on( "mouseover", function() { // get current class tmpClass = $(this).children('i').attr('class').split(/\s+/); // Swap $(this).children('i').removeClass(tmpClass[1]).addClass('fa-arrow-left'); }); // On mouse out $('.backButton').on( "mouseout", function() { $(this).children('i').removeClass('fa-arrow-left').addClass(tmpClass[1]); }); });

 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /> <a class="navbar-brand backButton" href="/dashboard"> <i class="fas fa-user-lock"></i> </a> <a class="navbar-brand backButton" href="/dashboard"> <i class="fas fa-bomb"></i> </a> <a class="navbar-brand backButton" href="/dashboard"> <i class="fas fa-bell-slash"></i> </a>

Answer 2

你可以试试这个，这样你就可以为具有相同功能的不同组件调用相同的函数。

 function onBackButtonHover(e) { var i = $(e).find('i.fas') $(i).removeClass($(i).attr("default")).addClass($(i).attr("hover")) } function onBackButtonOut(e) { var i = $(e).find('i.fas') $(i).removeClass($(i).attr("hover")).addClass($(i).attr("default")) }

 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /> <a id="backButton intranet" class="navbar-brand" href="/dashboard" onmouseover="onBackButtonHover(this)" onmouseout="onBackButtonOut(this)"> <i class="fas fa-user-lock" default="fa-user-lock" hover="fa-arrow-left"></i> </a>