如何将单选按钮添加到翻转功能

Question

当用户将鼠标悬停在img1 ，我具有以下标记， img2出现在img1下面。 同样，将img3悬停在img3 ， img4与img2出现在同一位置。

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

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

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