CODEWITHSUNDEEP
javascripthtml
Pepelius
Pepelius

Reputation: 1609

Switching between Font-Awesome icons on hover

I've tried to get my head around different solutions, yet none of them seem to work for my project.

The farthest I've got was with this;

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>

But the issue here is that I don't know how to restore the icon back to normal, once it has been changed, without using a static class. I would like to avoid using a static class, because the same script would run on pages with different icons, so classes will vary from page to page.

Another issue seems to be that the script is ran multiple times during one mouseover, as the console.log shows.

My goal would be to simply change the current icon to fa-arrow-left when the link is hovered, and switch it back to the original icon once it's done.

The solution should also cover mobile users, so it would have to register a touch-input as well - how should I approach this?

Upvotes: 0

Views: 348

Answers (2)

arcworks27
arcworks27

Reputation: 93

You could try this, so that you can call same functions for different component with same functionality.

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>

Upvotes: 0

tarkh
tarkh

Reputation: 2549

If I get you right it's pretty simple

$('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>

Now second part of your question - how to not hardcode classnames? Well, obviously you need to do something like this - read class of active element, remember it and use on mouseout... Something like this... (I change backButton ID to class to show multiple icons example)

$('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>

Upvotes: 1

Related Questions