怎么用jquery做出这种鼠标放到导航栏就改变颜色，变成“首页”的颜色。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .nav ul{
            display: flex;
        }
        .hover{
            background-color: red;
        }
        li {list-style-type:none;padding: 0 10px}
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="1.html" class="hover"> 首页</a></li>
            <li><a href="2.html"> 个人资料</a></li>
            <li><a href="3.html"> 我的好友</a></li>
            <li><a href="4.html"> 消息管理</a></li>
        </ul>
    </div>
    <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".nav a").each(function(){
            $(this).hover(function(){
                $(".nav .hover").removeClass("hover");
                $(this).addClass("hover");
                // return false;//防止页面跳转
            });
        });
    });
    </script>
</body>
</html>

css 就能写用hover伪类，jq的话只能绑定事件了

addClass