JQuery点击事件生效后鼠标移动样式复原问题求助

我开发了一个采用flex: row布局的页面，父DIV包含左右两个子区域。左侧的Products按钮点击后会显示All Products和Recipes按钮，hover这三个按钮时，右侧的right_side_img元素样式会正常变更并保留。但点击All Products按钮修改right_side_img样式后，鼠标一动样式就会复原，此问题hover时不会出现，求解决思路。

问题核心是jQuery的hover()仅绑定了鼠标进入事件，未处理鼠标离开逻辑。点击All Products后，鼠标移动时极易触发其他按钮的hover事件，导致hover样式覆盖点击设置的行内样式。

最优方案是用CSS类统一管理状态样式，替换直接操作行内样式的方式，同时完善hover事件的完整逻辑：

• 用专属类定义hover、点击激活等不同状态的样式
• hover事件同时处理鼠标进入（添加对应类）和离开（重置默认类）
• 点击All Products时添加专属激活类，彻底与hover状态隔离

修改后的代码 #

JavaScript #

$(document).ready(function() {
    let btn_state = true;

    // 控制Products按钮展开/收起子按钮
    $("#main_pr_btn").on("click", function(){
        btn_state = !btn_state;
        $(this).toggleClass("active");
        $("#all_pr_btn").fadeToggle(300);
        $("#recipes").fadeToggle(600);
    });

    // 主按钮hover逻辑：进入加类，离开重置
    $("#main_pr_btn").hover(
        function() { $(".right_side_img").removeClass().addClass("right_side_img main-hover"); },
        function() { $(".right_side_img").removeClass().addClass("right_side_img"); }
    );

    // All Products按钮hover逻辑
    $("#all_pr_btn").hover(
        function() { $(".right_side_img").removeClass().addClass("right_side_img all-hover"); },
        function() { $(".right_side_img").removeClass().addClass("right_side_img"); }
    );

    // Recipes按钮hover逻辑
    $("#recipes").hover(
        function() { $(".right_side_img").removeClass().addClass("right_side_img recipes-hover"); },
        function() { $(".right_side_img").removeClass().addClass("right_side_img"); }
    );

    // All Products点击激活逻辑
    $("#all_pr_btn").on("click", function(){
        $(".right_side_img").removeClass().addClass("right_side_img all-active");
        $("#buttons").css({
            "visibility": "hidden",
            "opacity" : "0",
            "transition" : "0.3s ease-in-out"
        });
    });
});

CSS #

在原有CSS基础上添加以下类样式：

/* 主按钮hover样式 */
.right_side_img.main-hover {
    box-shadow: 45px 45px 150px 50px rgb(255, 255, 255);
    background-color: white;
    background-size: 115%;
}

/* All Products按钮hover样式 */
.right_side_img.all-hover {
    box-shadow: -45px 35px 100px 20px rgb(255, 255, 255);
    background-color: red;
    background-size: 180%;
}

/* Recipes按钮hover样式 */
.right_side_img.recipes-hover {
    box-shadow: 0px 0px 150px 50px #80ffcc;
    background-color: blue;
    background-size: 140%;
}

/* All Products点击激活样式 */
.right_side_img.all-active {
    background-color: yellow;
    background-size: 140%;
}

HTML（修正原结构闭合错误） #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Main Page</title>
        <link rel="stylesheet" href="../mycss/style.css">
        <link href="http://fonts.cdnfonts.com/css/aloevera" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Alegreya Sans SC' rel='stylesheet'>
        <link href='https://fonts.googleapis.com/css?family=Didact Gothic' rel='stylesheet'>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    </head>
    <body>
        <div class="section_1">
            <div class="parent_left_side">
                <div class="left_side_first_page">
                    <div id="buttons">
                        <div id="main_pr_btn">
                            <button type="button">
                                Products
                            </button>
                        </div>
                        <div id="all_pr_btn">
                            <button type="button">
                                All Products
                            </button>
                        </div>
                        <div id="recipes">
                            <button type="button">
                                Recipes
                            </button>
                        </div>
                    </div>
                </div>
                <div class="left_side_second_page">                    
                </div>
            </div>
            <div class="right_side">
                <div class="right_side_img">
                </div>
            </div>
        </div>
        
        <script src="../myjs/mainpage.js"></script>
    </body>
</html>

内容的提问来源于stack exchange，提问作者Τάσος Τσιαμίτας