$('.fa-spinner').hover(function() {
$(this).addClass('fa-spin');
}, function() {
$(this).removeClass('fa-spin');
});
<link rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
<link 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>
你應該為鏈接寫函數。為此,您可以將類添加到鏈接中,然后執行以下操作:
<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>
然后你的js代碼:
$('.fa-link').hover(function() {
$(this).find(".fa-spinner").addClass('fa-spin');
}, function() {
$(this).find(".fa-spinner").removeClass('fa-spin');
});
不用JS也能做到,只有用CSS,有個例子. fa-spinner:hover,a:hover。fa-spinner {動畫:fa-spin 2s無限線性;}
上一篇vue下拉列表樹
下一篇c 的json數組的遍歷