如何添加单选按钮以进行翻转功能

Question

当用户将鼠标悬停在img1上时，我有以下标记，img2显示在img1下方。此外，当鼠标悬停在img3上时，img4与img2显示在同一位置。

我想要做的是将img1和img3转换为单选按钮，这样我不仅可以使用上述功能，而且在点击时img3仍然可见，直到我决定单击img3（这是另一个单选按钮）。

＆＃13;

＆＃13;

#img2 {
display: none;
position: absolute;
}
#img1:hover + #img2,
#img2:hover {

display:block;
}


#img4 {
display: none;
position: absolute;
}

#img3:hover + #img4,
#img4:hover {

display:block;
}

＆＃13;

  <ul>

  <li>

     <img id="img1" src="imageone.png">

     <img id="img2" src="imagetwo.png">

     <img id="img3" src="imagethree.png">

     <img id="img4" src="imagefour.png">   

  </li>

  </ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我希望这正是你所需要的

$(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>