如何将单选按钮添加到翻转function
当用户将鼠标hover在img1 ，我有以下标记， img2出现在img1下方。 此外，当hover在img3 ， img4出现在与img2相同的位置。
我想做的是将img1和img3变成单选按钮，这样我不仅可以使用上述function，而且在点击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; }
-
我希望这正是你所需要的
$(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; }
-
