Jquery 如何在输入和标签元素中创建mouseover和mouseleave效果

在这里，我的目标是使用mouseover和mouseleave效果将包装在标签中的图像替换为图像列表。我目前使用Jquery单击功能来显示和隐藏图像列表

示例：

如果鼠标位于

img1

上方，则会出现

img2

，一旦鼠标离开

img1

，则

img2

将消失，但一旦单击

img1

，img2将保持不变。我想为其他人提供相同的功能，因此假设我们现在可以看到

img2

，我想看到

img4

出现，如果鼠标进入

img3

则显示

img2

，如果鼠标离开，则返回

img2

基本上与的答案相同的功能

HTML:

JQUERY：

   $("img[id='img2']").css({"display": "none"});
   $("img[id='img4']").css({"display": "none"});
   $("img[id='img6']").css({"display": "none"});

    $("#img1").click(function(){
        $("img[id='img2']").show();
        $("img[id='img4']").hide();
        $("img[id='img6']").hide();
    });

    $("img[id='img3']").click(function(){
        $("img[id='img4']").show();
        $("img[id='img2']").hide();
        $("img[id='img6']").hide();
    });

     $("img[id='img5']").click(function(){
        $("img[id='img6']").show();
        $("img[id='img2']").hide();
        $("img[id='img4']").hide();
    });

---

我认为您应该使用类来跟踪状态。或者，您可以为每个图像创建对象，并添加跟踪状态的属性。我为你树立了一个榜样

---

好吧，你什么都不做在鼠标左键部分你是对的，我已经编辑了这个问题，使它更合适

input[type="radio"] {
display: none;
}

#img1, #img3, #img5 {
width: 100px;
height:100px;
}

#img2{
bottom: 25px;
}
#img4 {
bottom: 50px;
}
#img6 {
bottom: 75px;
}

   $("img[id='img2']").css({"display": "none"});
   $("img[id='img4']").css({"display": "none"});
   $("img[id='img6']").css({"display": "none"});

    $("#img1").click(function(){
        $("img[id='img2']").show();
        $("img[id='img4']").hide();
        $("img[id='img6']").hide();
    });

    $("img[id='img3']").click(function(){
        $("img[id='img4']").show();
        $("img[id='img2']").hide();
        $("img[id='img6']").hide();
    });

     $("img[id='img5']").click(function(){
        $("img[id='img6']").show();
        $("img[id='img2']").hide();
        $("img[id='img4']").hide();
    });

img1 = {
  node: $('#img1'),
  target: $('img[id=img2]'),
  clicked: false
};

img3 = {
    node: $('#img3'),
  target: $('img[id=img4]'),
  clicked: false
};

img5 = {
    node: $('#img5'),
  target: $('img[id=img6]'),
  clicked: false
};