首页 > 解决方案 > 我想在悬停时更改 html 类

问题描述

需要将悬停时的类更改为 fa-angle-down

$(document).ready(function () {
    $('#home i').hover(function () {
        $(this).addClass('fas fa-angle-down');
    }, function () {
        $(this).removeClass('fas fa-angle-up');
    });
});
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#home" id="home">Services <i id="angle" class="fas fa-angle-up"></i></a>

脚本

标签: javascriptjqueryhtml

解决方案


当鼠标经过时,您正在添加 fa-angle-down,当它消失时,您正在删除 fa-angle-up

如果要交换它们,则需要每次添加一个并删除类。

$(document).ready(function () {
    $('#home i').hover(function () {
        $(this).addClass('fa-angle-down').removeClass('fa-angle-up');
    }, function () {
        $(this).addClass('fa-angle-up').removeClass('fa-angle-down');
    });
});

推荐阅读