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

Question

我想制作4个按钮： 当你点击它时，所选的一个，它的背景图像被改变，其他3个仍然是原始背景图像，除非用户将它悬停，当用户悬停按钮时，它改变它的背景-图片 。

如果我只使用：悬停或：激活，单击后，当我释放鼠标时，背景图像将恢复为原始状态，或者只是移开鼠标，如果我使用点击功能，改变背景图像后它不能还原或必须键入一个长段代码来控制它。制作这4个按钮的最简单方法是什么？

我尝试这样做：升技笨拙，我有：悬停在CSS，但它实际上是缺少悬停效果的验证码

$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%"); 
    } 
}); 

Answer 1

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

$(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(); 
});