如何将单选按钮添加到翻转功能 [英] How to add radio buttons to rollover functionality

问题描述

当用户将鼠标悬停在img1上时，我具有以下标记，img2出现在img1下面.同样，当将鼠标悬停在img3上时，img4也会出现在与img2相同的位置.

I have the following markup for when the user hovers over img1, img2 appears below img1. Also when hovering over img3, img4 appears in the same place as img2.

我想做的是将img1和img3变成单选按钮，这样我不仅具有上述功能，而且在单击img3时仍然可见，直到我决定单击img3(这是另一个单选按钮).

What I would like to do is turn img1 and img3 into radio buttons so that not only do I have the above functionality but also when clicked img3 remains visible until I decide to click on img3 (which is another radio button).

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

display:block;
}


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

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

display:block;
}

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

推荐答案

我希望这正是您所需要的

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>

这篇关于如何将单选按钮添加到翻转功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！