Fa-Spin on hover link text too, not only when hover icon

May 18, 2023

$('.fa-spinner').hover(function() {
        $(this).addClass('fa-spin');
    }, function() {
        $(this).removeClass('fa-spin');
    });

<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/fontawesome.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
     <tr><td><a href=""><i class="fa fa-spinner"></i> Mylink 1</a></td></tr>
     <tr><td><a href=""><i class="fa fa-spinner"></i> Mylink 2</a></td></tr>
     <tr><td><a href=""><i class="fa fa-spinner"></i> Mylink 3</a></td></tr>
     <tr><td><a href=""><i class="fa fa-spinner"></i> Mylink 4</a></td></tr>
     <tr><td><a href=""><i class="fa fa-spinner"></i> Mylink 5</a></td></tr>
    </table>

i have code like this

<table class="table">
 <tr><td><a href=""><i class="fa fa-spinner"></i> Mylink 1</a></td></tr>
 <tr><td><a href=""><i class="fa fa-spinner"></i> Mylink 2</a></td></tr>
 <tr><td><a href=""><i class="fa fa-spinner"></i> Mylink 3</a></td></tr>
 <tr><td><a href=""><i class="fa fa-spinner"></i> Mylink 4</a></td></tr>
 <tr><td><a href=""><i class="fa fa-spinner"></i> Mylink 5</a></td></tr>
</table>

i want to add animation fa-spin when hover link with this juery code

$('.fa-spinner').hover(function() {
    $(this).addClass('fa-spin');
}, function() {
    $(this).removeClass('fa-spin');
});

the problem is it’s still lacking than what i intent
when i hover mouse on label text Mylink 1 etc,
it’s not add class fa-spin in <i> tag
it’s only add fa-spin when i hover mouse in fa-spinner icon

how should i do it properly?

>Solution :

You should write the function for links. To achieve that you can add classes to links then do:

<table class="table">
 <tr><td><a href="" class="fa-link"><i class="fa fa-spinner"></i> Mylink 1</a></td></tr>
 <tr><td><a href="" class="fa-link"><i class="fa fa-spinner"></i> Mylink 2</a></td></tr>
 <tr><td><a href="" class="fa-link"><i class="fa fa-spinner"></i> Mylink 3</a></td></tr>
 <tr><td><a href="" class="fa-link"><i class="fa fa-spinner"></i> Mylink 4</a></td></tr>
 <tr><td><a href="" class="fa-link"><i class="fa fa-spinner"></i> Mylink 5</a></td></tr>
</table>

Then your js code :

$('.fa-link').hover(function() {
    $(this).find(".fa-spinner").addClass('fa-spin');
}, function() {
    $(this).find(".fa-spinner").removeClass('fa-spin');
});