Javascript 这4个按钮最简单的方法是什么？

我想制作4个按钮，分别是： 当你点击它时，选中的一个，它的背景图像改变了，另外三个保持原来的背景图像，除非用户悬停它，当用户悬停按钮时，它改变了它的背景图像

如果我只使用：hover，或：active，单击后，当我释放鼠标时，背景图像将还原为原始图像，或刚移开鼠标，如果我使用单击功能，在更改背景图像后，它无法还原或必须键入长代码来控制它。制作这4个按钮的最简单方法是什么

我尝试了这个：有点笨拙，我在css中有：hover，但它实际上缺少了这段代码的悬停效果

$s_btn_1.on('click',function() {
        if (chosen!=1){
            chosen = 1; 
            console.log('chosen');
        $.get("services_1.php", function(data){
         // $service_box.html(data);

        }); 

        return_default();

        $folder1.css('background',"url('images/services/btn1_hover.png')");
        $folder1.css('background-size',"100% 100%");

    }

    });

  $s_btn_2.on('click',function() {
        if (chosen!=2){
            chosen = 2;
            console.log('chosen');

            $.get("services_2.php", function(data){
        //      $service_box.html(data);
            });
            return_default();

            $folder2.css('background',"url('images/services/btn2_hover.png')");
            $folder2.css('background-size',"100% 100%");
        }
    });

    $s_btn_3.on('click',function() {
        if (chosen!=3){
            chosen = 3;
            return_default();

            $folder3.css('background',"url('images/services/btn3_hover.png')");
            $folder3.css('background-size',"100% 100%");
        }
    });

    $s_btn_4.on('click',function() {
        if (chosen!=4){
            chosen = 4;
            return_default();

            $folder4.css('background',"url('images/services/btn4_hover.png')");
            $folder4.css('background-size',"100% 100%");
        }
    });
  //$("#service_btn").addClass(".folder1_hover");
    function return_default(){
        $folder1.css('background-image',"url('images/services/btn1.png')");
        $folder2.css('background-image',"url('images/services/btn2.png')");
        $folder3.css('background-image',"url('images/services/btn3.png')");
        $folder4.css('background-image',"url('images/services/btn4.png')");
        $folder1.css('background-size',"100% 100%");
        $folder2.css('background-size',"100% 100%");
        $folder3.css('background-size',"100% 100%");
        $folder4.css('background-size',"100% 100%");
    }
});

---

我刚刚完成我的目标，所以我在这里发布我的代码，我认为这是最简单的方法，而且很清楚

$(document).ready(function() {   
     var btns = {
         'bg_o' : ['images/services/btn1.png','images/services/btn2.png','images/services/btn3.png','images/services/btn4.png'],
         'bg_h' : ['images/services/btn1_hover.png','images/services/btn2_hover.png','images/services/btn3_hover.png','images/services/btn4_hover.png'],
         '$all_btn' : $('.all_btn'),
         '$folders':[$('#folder1'),$('#folder2'),$('#folder3'),$('#folder4')],
         'folders_status':new Array('inactive','inactive','inactive','inactive')
         ,jquery_func : function(){
            btns.$all_btn.each(function(){
                $(this).click(function(){
                    for(i=0;i<4;i++){
                        var imageurl_o = new Array();
                        imageurl_o[i] = {'background-image':'url('+btns.bg_o[i]+')'};       
                        btns.$folders[i].css(imageurl_o[i]);    
                        btns.folders_status[i]='inactive';
                    }
                    for(i=0;i<4;i++){           
                        var myparent = btns.$folders[i].parent();                       
                        if($(this).attr('class') == myparent.attr('class')){
                            var imageurl_h = {'background-image':'url('+btns.bg_h[i]+')'};
                            btns.$folders[i].css(imageurl_h);   
                            btns.folders_status[i]='active';
                        }   
                    }
                });
                $(this).mouseover(function(){
                    for(i=0;i<4;i++){
                        var imageurl_o = new Array();
                        imageurl_o[i] = {'background-image':'url('+btns.bg_o[i]+')'};
                        if(btns.folders_status[i]=='inactive')
                        btns.$folders[i].css(imageurl_o[i]);    
                    }
                    for(i=0;i<4;i++){           
                        var myparent = btns.$folders[i].parent();                       
                        if($(this).attr('class') == myparent.attr('class')){
                            var imageurl_h = {'background-image':'url('+btns.bg_h[i]+')'};
                            btns.$folders[i].css(imageurl_h);   
                        }   
                    }

                });
            }); 
         }
     }
     btns.jquery_func();
});  

$（文档）.ready（函数（）{
可变基站={
‘bg_o’：[‘images/services/btn1.png’、‘images/services/btn2.png’、‘images/services/btn3.png’、‘images/services/btn4.png’，
‘bg_h’：[‘images/services/btn1_hover.png’、‘images/services/btn2_hover.png’、‘images/services/btn3_hover.png’、‘images/services/btn4_hover.png’，
“$all_btn”：$（“.all_btn”），
“$folders”：[$（'#folder1'），$（'#folder2'），$（'#folder3'），$（'#folder4'）]，
“文件夹状态”：新数组（“非活动”、“非活动”、“非活动”、“非活动”）
，jquery_func:function（）{
btn.$all_btn.每个（函数（）{
$（此）。单击（函数（）{
对于（i=0；i）您尝试过什么？如果还没有尝试，请先尝试一些东西，如果卡住了，请带着代码来到这里。