Question 171047 in CSS Question posted in
Some basic documentation can be found here.

Can CSS fa-spin on hover link text too, not just when hovering over icon?

$('.fa-spinner').hover(function() {
        $(this).addClass('fa-spin');
    }, function() {
        $(this).removeClass('fa-spin');
    });
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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?

Tags:

2

Answers


  1. 0

    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');
});
    Login or Signup to reply.
  2. 0

    You can do this without JS, but only with CSS, there is an example.fa-spinner:hover{animation: fa-spin 2s infinite linear;}

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search