我希望这正是您所需要的

I hope this is exactly what you needed

$(document).ready(function(){
        $("img[id='img2']").css('display', 'none');
        $("img[id='img4']").css('display', 'none');
        
        $("img[id='img1']").click(function(){
            $("img[id='img2']").show();
            //this will do the radio button's job for clicked value i.e to keep track of when last img1 was clicked and remove from img3
            $("img[id='img1']").attr("click_checker", "yes");
            $("img[id='img3']").removeAttr("click_checker");
            $("img[id='img4']").hide();
        });
        $("img[id='img3']").click(function(){
            $("img[id='img4']").show();
            //this will do the radio button's job for clicked value i.e to keep track of when last img3 was clicked and remove from img1
            $("img[id='img3']").attr("click_checker", "yes");
            $("img[id='img1']").removeAttr("click_checker");
            $("img[id='img2']").hide();
        });
        
        $("img[id='img1']").mouseover(function(){
            $("img[id='img2']").show();
            $("img[id='img4']").hide();
        });
        $("img[id='img1']").mouseleave(function() {
            var img3_check = $("img[id='img3']").attr("click_checker");
            var img1_check = $("img[id='img1']").attr("click_checker");
            if (img3_check == 'yes') {
                //when mouse leaves we check if img3 has click_checker still on, then we show img4 if not both img2 and img4 will be hidden
                $("img[id='img2']").hide();
                $("img[id='img4']").show(); 
            } else if (img1_check == 'yes') {
                $("img[id='img2']").show();
            } else {
                 $("img[id='img2']").hide();
                 $("img[id='img4']").hide();
            }
         });

         $("img[id='img3']").mouseover(function(){
             $("img[id='img2']").hide();
             $("img[id='img4']").show();
         });
         $("img[id='img3']").mouseleave(function() {
             var img3_check = $("img[id='img3']").attr("click_checker");
             var img1_check = $("img[id='img1']").attr("click_checker");
             if (img1_check == 'yes') {
                   //when mouse leaves we check if img1 has click_checker still on, then we show img2 if not both img2 and img4 will be hidden
                 $("img[id='img2']").show();
                 $("img[id='img4']").hide(); 
             } else if (img3_check == 'yes') {
                $("img[id='img4']").show();
             } else {
                 $("img[id='img2']").hide();
                 $("img[id='img4']").hide();
             }
         });

    });

#img2, #img4 {
  width: 100px;
  height:100px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <ul>
    <li>
       <img id="img1" src="http://www.julienlevesque.net/preview/google-smile-preview.jpg">
       <img id="img2" src="http://metroui.org.ua/images/2.jpg">
       <img id="img3" src="http://www.julienlevesque.net/preview/google-smile-preview.jpg">
       <img id="img4" src="http://metroui.org.ua/images/4.jpg">   
    </li>
    </ul>