Question

I want to make 4 buttons that are:
when you click on it,the one chosen, its background-image changed, the other 3 remain the original background image unless user hover it ,while user hover the buttons it changes its background-image .

If I only use :hover, or :active,after clicked,the background image will revert to original when I release mouse,or just moved away mouse, if I use click function, after it changed background image it cannot be revert or have to type a long piece codes to control it.What is the simplest way to make these 4 buttons?

I tried this: abit clumsy, I have :hover in css, but it is actually missing the hover effect for this code

$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

I just finished my aim so I post my code here, I think it is the simplest way,and clear

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